Kompreni la ĉefajn ŝanĝojn al CSS3
La plej granda diferenco inter CSS2 kaj CSS3 estas ke CSS3 estis disigita en malsamaj sekcioj, nomitaj moduloj. Ĉiu el ĉi tiuj moduloj trapasas la W3C en diversaj stadioj de la rekomenda procezo. Ĉi tiu procezo faris multe pli facile por diversaj pecoj de CSS3 esti akceptitaj kaj implementitaj en la retumilo de malsamaj fabrikantoj.
Se vi komparas ĉi tiun procezon al kio okazis kun CSS2, kie ĉio estis submetita kiel ununura dokumento kun ĉiuj informoj de Kascading Style Sheets ene de ĝi, vi komencos vidi la avantaĝojn rompi la rekomendon en pli malgrandajn, individuajn pecojn. Ĉar ĉiu el la moduloj funkcias individue, ni havas multe pli ampleksan gamon de retumilo por CSS3-moduloj.
Kiel kun iu ajn nova kaj ŝanĝiĝema specifaĵo, certu provi viajn CSS3-paĝojn plene en multaj foliumiloj kaj operaciumoj kiel vi povas. Memoru, ke la celo estas ne krei retpaĝojn, kiuj aspektas ĝuste samaj en ĉiu retumilo, sed por certigi, ke ajnaj stiloj, kiujn vi uzas, inkluzive de CSS3-stiloj, aspektas bonege en la retumiloj, kiuj subtenas ilin kaj ke ili reiras gracie por malnovaj foliumiloj, ne.
Novaj CSS3 Elektantoj
CSS3 ofertas multajn novajn manierojn, kiujn vi povas skribi regulojn de CSS kun novaj CSS-elektiloj, same kiel nova kombinilo kaj kelkaj novaj pseŭdo-elementoj.
Tri novaj atribuaj elektiloj:
- Atributa komenco matĉoj ĝuste ero [foo ^ = "trinkejo"] La elemento havas atributon nomatan foo kiu komenciĝas per "trinkejo" ekz.
- Atributa fino kunigas ĝuste ero [foo $ = "bar"] La elemento havas atributon nomitan foo kiu finiĝas per "trinkejo" ekz.
- Atributo enhavas la elementon de la matĉo [foo * = "bar"] La elemento havas atributon nomitan foo kiu enhavas la ŝnuron "trinkejo" ekz.
16 novaj pseŭdoklasoj:
- : radiko
- La radika elemento de la dokumento. En HTML ĉi tio estas ĉiam.
- : n-infano (n)
- Uzu ĉi tion por egali ekzaktajn infanajn elementojn aŭ uzi variablojn por akiri alternajn matĉojn.
- : nth-last-child (n)
- Turni ekzaktajn infanajn elementojn kalkulante de la lasta.
- : nth-de-tipo (n)
- Turniĝu sibling elementoj kun la sama nomo antaŭ ĝi en la dokumenta arbo.
- : nth-last-of-type (n)
- Turniĝu sibling elementoj kun la sama nomo kalkulanta supre de la fundo.
- : lasta-infano
- Turnu la lastan infanon de la gepatro.
- : unua-de-tipo
- Turnu la unuan fraton de tiu tipo.
- : lasta-de-tipo
- Turnu la lastan siblingan elementon de tiu tipo.
- :sola infano
- Turnu la elementon, kiu estas la sola infano de sia patro.
- : nur-de-tipo
- Turnu la elementon, kiu estas la sola el ĝia tipo.
- : malplena
- Turnu la elementon, kiu ne havas infanojn (inkluzive tekstajn nodojn).
- : celo
- Turnu elementon, kiu estas la celo de la referenta URI.
- : ebligita
- Turnu la elementon kiam ĝi estas ebligita.
- : malebligita
- Turnu la elementon kiam ĝi estas malebligita.
- : kontrolita
- Turnu la elementon kiam ĝi estas kontrolita (radio-butono aŭ markobutono).
- : ne (j)
- Turniro kiam la elemento ne kongruas kun la simpla elektilo .
Unu nova kombinilo:
- elementA ~ elementB
- Turniro kiam elementB sekvas ie post elementA, ne nepre tuj.
Novaj Ecoj
CSS3 ankaŭ enkondukis kelkajn novajn CSS-proprietojn. Multaj el ĉi tiuj posedaĵoj kreis vidajn stilojn, kiuj verŝajne asocias pli kun grafika programo kiel Photoshop. Kelkaj el tiuj, kiel landlima radiuso aŭ skatola ombro, estis ĉirkaŭe de la enkonduko, se CSS3. Aliaj, kiel flexbox aŭ eĉ CSS Grid estas pli novaj stiloj, kiuj ankoraŭ ofte konsideras CSS3-aldonojn.
En CSS3, la skatolo modelo ne ŝanĝis. Sed ekzistas aro da novaj stilaj proprietoj, kiuj povas helpi vin al stili la fonojn kaj limojn de viaj skatoloj.
Multoblaj Fonoj Mi magegas
Uzante la fonon-bildon, fono-pozicion, kaj fono-ripetajn stilojn vi povas specifi multajn fonojn bildojn por esti manteloj supre unu de la alia en la skatolo. La unua bildo estas la mantelo plej proksima al la uzanto, kun la sekvaj pentritaj malantaŭe. Se ekzistas fonkoloro, ĝi estas pentrita sub ĉiuj bildaj tavoloj.
Novaj Fona Stilo-Propraĵoj
Ankaŭ ekzistas iuj novaj fono-proprietoj en CSS3.
- fono-klipo
- Ĉi tiu nemoveblaĵo difinas kiel la fono-bildo devas esti fermita. La defaŭlto estas la landlima skatolo, sed ĝi povas esti ŝanĝita al la kompletigado aŭ en la enhavo-skatolo.
- fono-origino
- Ĉi tiu nemoveblaĵo determinas ĉu la fono devas esti lokoj en la kompleta skatolo, la landlima skatolo aŭ la enhavo-skatolo.
- fono-grandeco
- Ĉi tiu propraĵo permesas al vi indiki la grandecon de la fono-bildo. Ĝi permesas al vi etendi pli malgrandajn bildojn por persvadi la paĝon.
Ŝanĝoj al Ekzistantaj Fona Stilo-Propraĵoj
Ankaŭ ekzistas kelkaj ŝanĝoj al ekzistantaj fono-nemoveblaĵoj:
- fono-ripeto
- Estas du novaj valoroj por ĉi tiu propraĵo: spaco kaj ĉirkaŭvojo. Spacaj spacoj la tegita bildo egalas ene de la skatolo sen esti tranĉita. Ronda rekretas la fonan bildon tiel ke ĝi kaŝos tutan kvanton de fojoj en la skatolo.
- fono-alligiteco
- Nova valoro "loka" estas aldonita tiel ke la fono moviĝos per la enhavo de la elemento kiam tiu elemento havas ruluman stangon.
- fono
- La fono taŭga propraĵo aldonas en la grandeco kaj originaj propraĵoj.
CSS3 Landlimaj Proprietoj
En CSS3-limoj povas esti la stiloj, kiujn ni uzas (solidaj, duoblaj, disigitaj, ktp) aŭ ili povas esti bildo. Plus, CSS3 alportas la kapablon krei rondajn angulojn. Landlimaj bildoj estas interesaj ĉar vi kreas bildon de ĉiuj kvar limoj kaj poste diru al la CSS kiel apliki tiun bildon al viaj limoj.
Novaj Landlimaj Ecoj
Estas iuj novaj landlimaj propraĵoj en CSS3:
- limo-radiuso
- limo-supre-dekstra-radiuso , landlima-malsupra-dekstra-radiuso , limo-malsupra-maldekstra-radiuso , limo-supro-maldekstra-radiuso
- Ĉi tiuj ecoj permesas vin krei rondajn angulojn sur viaj limoj.
- limo-bildo-fonto
- Specifas la bildan dosieron-dosieron por esti uzata anstataŭ landlimaj stiloj jam difinitaj.
- limo-bildo-tranĉaĵo
- Ĝi reprezentas la internaĵojn de la rando de la landlima bildo
- limo-bildo-larĝa
- Difinas la valoron de la larĝo por via landlima bildo.
- landlima bildo
- Specifas la kvanton, kiun la landlima areo etendas preter la landlima skatolo.
- landlima bildo
- Difinas kiel la flankoj kaj meza partoj de la landlima bildo devas esti kahelitaj aŭ skalataj.
- landlima bildo
- La taŭgaĵa propraĵo por ĉiuj limaj bildaj propraĵoj.
Pliaj CSS3 Propraĵoj Rilatitaj al Limoj kaj Fonoj
Kiam skatolo estas rompita ĉe paka paŭzo, kolumno rompas por linia rompo (por inlineaj elementoj) la skatolo-dekoracio-rompa propraĵo difinas kiel la novaj skatoloj estas envolvitaj kun limo kaj kompletigo. Fonoj povas esti dividitaj inter pluraj rompitaj skatoloj uzantaj ĉi tiun proprieton.
Ekzistas ankaŭ skatola ombro, kiu povas esti uzata por aldoni ombrojn al skatolo elementoj.
Kun CSS3, vi nun povas facile agordi Retpaĝon kun multaj kolumnoj sen tabloj aŭ komplikaj div-etikedoj. Vi simple diru al la retumilo kiom da kolumnoj la korpo elemento devas havi kaj kiom larĝe ili devus esti. Plus vi povas aldoni limojn (regulojn), fonkolorajn kolorojn, kiuj ampleksas la altecon de la kolumno, kaj via teksto fluos aŭtomate per ĉiuj kolumnoj.
CSS3 Kolumnoj - Difini la Nombro kaj Larĝecon de la Kolumnoj
Ekzistas tri novaj propraĵoj, kiuj permesas difini la numeron kaj larĝecon de viaj kolumnoj:
- kolumno-larĝa
- Difinas la larĝecon de viaj kolumnoj. La retumilo tiam fluos la tekston por plenigi la spacon per kolumnoj, kiuj larĝe.
- kolumno-kalkulo
- Difinas la numeron de kolumnoj sur la paĝo. La retumilo tiam kreos kolumnojn sufiĉe larĝe por persvadi en la spaco, sed nur la numeron vi specifas.
- kolumnoj
- Komercaj posedaĵoj, kie vi povas difini la larĝecon aŭ la numeron (aŭ ambaŭ, sed malofta fojo havas senton).
CSS3 Kolumnaj Lagoj kaj Reguloj
Malliberejoj kaj reguloj estas metitaj inter kolumnoj en la sama multkolora scenejo. La gapoj disbatos la kolumnojn, sed la reguloj ne plu prenas spacon. Se kolumna regulo estas pli larĝa ol ĝi estas breĉo, ĝi superkovros apudajn kolumnojn. Ekzistas kvin novaj propraĵoj por kolumreguloj kaj malplenoj:
- kolumno-breĉo
- Difinas la larĝecon de la interspacoj inter la kolumnoj.
- kolumno-regulo-koloro
- Difinas la koloron de la regulo.
- kolumno-regulo-stilo
- Difinas la stilon de la regulo (solida, dotita, duobla, ktp).
- kolumno-regulo-larĝa
- Difinas la larĝecon de la regulo.
- kolumno-regulo
- Komercaj proprieto samtempe difinanta ĉiujn tri kolumajn regojn.
CSS3 Kolumno Rompas, Spanning Kolumnoj kaj Pleniganta Kolumnojn
Kolumno rompas uzi la samajn CSS2-eblojn por difini rompiĝojn en pagata enhavo, sed kun tri novaj propraĵoj: rompi-antaŭ , rompi-post kaj rompi-interne .
Kiel kun tabloj, vi povas agordi elementojn por ampleksi kolumnojn kun la kolumno-ampleksa posedaĵo. Ĉi tio permesas vin krei titolojn, kiuj ampleksas plurajn kolumnojn pli kiel ĵurnalo.
Plenigantaj kolumnoj decidas kiom da enhavo estos en ĉiu kolumno. Ekvilibraj kolumnoj provas meti la saman kvanton da enhavo en ĉiu kolumno, kiam aŭtomobilo nur fluas la enhavon ĝis la kolumno estas plena kaj poste iras al la sekva.
Pli da Trajtoj en CSS3 Tio Komprenita en CSS2
Estas multaj pliaj trajtoj en CSS3, kiuj ne ekzistis en CSS2, inkluzive:
- CSS Ŝablona aranĝo modulo kaj CSS3 Grid-pozicio modulo : Kreante kradojn kun CSS.
- CSS3 Teksto modulo : skizi tekston kaj eĉ krei falita ombroj kun CSS.
- CSS3 Kolora modulo : Nun kun opakeco.
- Ŝanĝoj al la skatolo modelo : Inkluzivanta marquee propraĵon kiu agas kiel la IE-etikedo.
- CSS3-uzanto-Interfaco-modulo : Donante al vi novajn kursorojn, respondojn al agoj, postulataj kampoj, kaj eĉ regrandigi elementojn .
- Duona Demandoj : Mediaj demandoj permesas al vi pli flekseblecon kiam vi difinas kiel stilon de stilo devus esti uzata. Ekzemple, vi povus difini stilon, kiu estas nur por porteblaj aparatoj, kiuj havas vidadon pli ol 20em.
- CSS3 Ruby-modulo : Provizas subtenon por lingvoj, kiuj uzas laŭtektajn rubiojn por noti dokumentojn.
- CSS3 Paged Media modulo : Por eĉ pli da subteno por pagataj amaskomunikiloj (papero, transparencoj, ktp).
- Generita enhavo : L kurantaj kaplinioj kaj piedoj, piednotoj kaj alia enhavo, kiu estas generita programme, precipe por pagataj amaskomunikiloj.
- CSS3 Parola modulo : Ŝanĝoj al aŭdaca CSS.