La diferència entre CSS2 i CSS3

Comprendre els canvis principals a CSS3

La major diferència entre CSS2 i CSS3 és que CSS3 s'ha dividit en diferents seccions, anomenades mòduls. Cadascun d'aquests mòduls fa el pas pel W3C en diverses etapes del procés de recomanació. Aquest procés ha fet que els fabricants diferents acceptin i implementin diverses peces de CSS3 en el navegador.

Si comparem aquest procés amb el que va passar amb CSS2, on tot es va presentar com un únic document amb tota la informació de Fulls d'Estil en cascada , començarà a veure els avantatges de trencar la recomanació en peces més petites i individuals. Com que cada un dels mòduls es treballa individualment, tenim un rang molt més ampli de compatibilitat amb el navegador per als mòduls CSS3.

Igual que amb qualsevol especificació nova i canviant, assegureu-vos de provar les vostres pàgines de CSS3 a la mida de la quantitat de navegadors i sistemes operatius que pugueu. Recordeu que l'objectiu no és crear pàgines web que siguin exactament iguals a tots els navegadors, sinó que assegureu-vos que els estils que utilitzeu, inclosos els estils CSS3, tinguin una gran aparença als navegadors que els admetin i que caiguin amb gràcia per als navegadors antics que no ho fas.

Nous selectors CSS3

CSS3 ofereix un munt de noves maneres d'escriure normes CSS amb nous selectors CSS, així com un nou combinador, i alguns pseudo-elements nous.

Tres nous selectors d'atributs:

• El principi de l'atribut coincideix exactament amb l' element [foo ^ = "bar"] L'element té un atribut anomenat foo que comença amb "barra", per exemple
• El final de l'atribut coincideix exactament amb l' element [foo $ = "bar"] L'element té un atribut anomenat foo que acaba amb "barra", per exemple
• L'atribut conté l' element de coincidència [foo * = "bar"] L'element té un atribut anomenat foo que conté la cadena "barra", per exemple

16 noves pseudo-classes:

• : root
  • L'element arrel del document. En HTML això és sempre.
• : nth-child (n)
  • Utilitzeu aquesta opció per fer coincidir elements secundaris exactes o utilitzar variables per obtenir coincidències alternatives.
• : nth-last-child (n)
  • Coincideix amb els elements secundaris exactes que compten des de l'últim.
• : n-de-tipus (n)
  • Combineu els elements germans amb el mateix nom abans que l'arbre del document.
• : nth-last-of-type (n)
  • Combina els elements germans amb el mateix nom que es compten des de la part inferior.
• : últim fill
  • Coincideix amb l'últim element secundari del pare.
• : primer de tipus
  • Coincideix amb el primer element germà d'aquest tipus.
• : últim de tipus
  • Coincideix amb l'últim element germà d'aquest tipus.
• :fill únic
  • Coincideix amb l'element que és l'únic fill del seu pare.
• : només de tipus
  • Coincideix amb l'element que és l'únic del seu tipus.
• :buit
  • Coincideix amb l'element que no té fills (inclosos els nodes de text).
• :objectiu
  • Coincideix amb un element que és l'objectiu de l'URI de referència.
• : activat
  • Coincideix amb l'element quan està habilitat.
• : desactivat
  • Coincideix amb l'element quan està desactivat.
• :comprovat
  • Coincideix amb l'element quan està marcada (botó d'opció o casella de verificació).

• : no (s)
  • Concorda quan l'element no coincideix amb el selector simple s.

Un nou combinador:

• elementA ~ elementB
  • Concorda quan elementB segueix en algun lloc després de l'element A, no necessàriament immediatament.

Noves propietats

CSS3 també va introduir una sèrie de noves propietats CSS. Moltes d'aquestes propietats eren crear estils visuals que probablement s'associarien més amb un programa de gràfics com Photoshop. Alguns d'aquests, com el radi de vora o l'ombra de caixa, han existit des de la introducció si CSS3. Uns altres, com ara flexbox o fins i tot la Grid CSS, són estils més nous que encara sovint es consideren addicions CSS3.

A CSS3, el model de caixa no ha canviat. Però hi ha un munt de propietats d'estil nou que us poden ajudar a definir els fons i les fronteres de les vostres caixes.

Diversos antecedents Els magos

Usant la imatge de fons, la posició de fons i els estils de repetició de fons, podeu especificar diverses imatges de fons per tal que estiguin en capes una a la part superior de l'altra al quadre. La primera imatge és la capa més propera a l'usuari, amb els següents pintats darrere. Si hi ha un color de fons, es pinta a sota de totes les capes d'imatge.

Noves propietats d'estil de fons

També hi ha algunes propietats de fons noves en CSS3.

• clip de fons
  • Aquesta propietat defineix com s'ha de retallar la imatge de fons. El valor per defecte és el quadre de vora, però es pot canviar al quadre de farcit o al quadre de contingut.
• origen de fons
  • Aquesta propietat determina si el fons ha de ser lloc al quadre de farcit, al quadre de vora o al quadre de contingut.
• mida del fons
  • Aquesta propietat us permet indicar la mida de la imatge de fons. Permet estirar imatges més petites per adaptar-se a la pàgina.

Canvis a les propietats del estil de fons existents

També hi ha alguns canvis en les propietats d'estil de fons existents:

• repetició de fons
  • Hi ha dos valors nous per a aquesta propietat: espai i rodó. Espai espacial la imatge de rajoles uniformement dins de la caixa sense ser retallada. La ronda rescala la imatge de fons perquè s'ajusti diverses vegades al quadre.
• adjunció de fons
  • S'afegeix un nou valor "local" perquè el fons es desplaci amb el contingut de l'element quan aquest element tingui una barra de desplaçament.
• fons
  • La propietat de taquigrafia de fons afegeix a la mida i les propietats d'origen.

Propietats de vora de CSS3

En les fronteres CSS3 podem trobar els estils que estem acostumats (sòlids, dobles, puntejats, etc.) o poden ser una imatge. A més, CSS3 ofereix la possibilitat de crear cantonades arrodonides. Les imatges de la vora són interessants perquè crea una imatge de les quatre fronteres i, a continuació, us indiqueu a CSS com aplicar aquesta imatge a les vostres vora.

Noves propietats d'estil de vora

Hi ha algunes propietats frontereres noves a CSS3:

• radi límit
  • límit superior-dret-radi , límit inferior-dret-radi , límit inferior-radi esquerre , límit superior-radi esquerre
  • Aquestes propietats us permeten crear cantonades arrodonides a les vostres vora.
• border-image-source
  • Especifica el fitxer d'origen de la imatge que s'utilitzarà en comptes dels estils de vora ja definits.
• border-image-slice
  • Representa els desplaçaments interns de les vores de la imatge de la vora
• border-image-width
  • Defineix el valor de l'amplada de la imatge de la vora.
• border-image-startset
  • Especifica la quantitat que l'àrea de la imatge del límit s'estén més enllà del quadre de vora.
• border-image-stretch
  • Defineix com els costats i la part central de la imatge de la vora han de ser enrajolats o escalats.
• imatge fronterera
  • La propietat de taquigrafia per a totes les propietats de la imatge de la vora.

Propietats addicionals de CSS3 relacionades amb fronteres i fons

Quan una caixa es trenca en un salt de pàgina, el salt de columna per al salt de línia (per als elements en línia), la propietat de caixa-decoració-trenca defineix com els quadres nous estan embolicats amb vora i farcit. Els fons es poden dividir entre diversos quadres trencats que utilitzen aquesta propietat.

També hi ha una propietat de caixa ombra que es pot utilitzar per afegir ombres als elements de la caixa.

Amb CSS3, ara podeu configurar fàcilment una pàgina web amb diverses columnes sense taules o estructures d'etiquetes de divisió complicades. Simplement explica al navegador quantes columnes hauria de tenir l'element del cos i l'ample que haurien de tenir. A més, podeu afegir vora (regles), colors de fons que abastin l'alçada de la columna i el vostre text fluirà automàticament a totes les columnes.

Columnes CSS3: defineix el nombre i l'amplada de les columnes

Hi ha tres propietats noves que us permeten definir el nombre i l'amplada de les vostres columnes:

• ample de columna
  • Defineix l'amplada de les columnes. El navegador generarà el text per omplir l'espai amb columnes d'ample.
• recompte de columnes
  • Defineix el nombre de columnes a la pàgina. El navegador crearà columnes prou amples per adaptar-se a l'espai, però només el número que especifiqueu.
• columnes
  • Propietat de taquigrafia on podeu definir l'amplada o el número (o ambdós, però que poques vegades té sentit).

Disposicions i regles de columnes CSS3

Les escletxes i les regles es col·loquen entre columnes en el mateix escenari multicolum. Les llacunes separaran les columnes, però les regles no ocupen cap espai. Si la regla de la columna és més àmplia que la del buit, se superposarà les columnes adjacents. hi ha cinc propietats noves per a les regles i els buits de la columna:

• columna-bretxa
  • Defineix l'amplada de les llacunes entre les columnes.
• column-rule-color
  • Defineix el color de la regla.
• columna d'estil de regla
  • Defineix l'estil de la regla (sòlid, puntejat, doble, etc.).
• ample de la regla de columna
  • Defineix l'amplada de la regla.
• regla de columna
  • Una propietat de taquigrafia que defineix les tres propietats de la regla de columna alhora.

Sortides de columnes CSS3, columnes divisòries i columnes d'ompliment

Les pauses de columna utilitzen les mateixes opcions CSS2 que s'utilitzen per definir pauses en el contingut paginat, però amb tres propietats noves: break-before , break-after i break-inside .

Igual que amb les taules, podeu establir elements per ampliar columnes amb la propietat column-span. Això us permet crear títols que abasten diverses columnes més com un diari.

Les columnes d'emplenament determinen el contingut de cada columna. Les columnes equilibrades intenten col · locar la mateixa quantitat de contingut a cada columna, mentre que automàtic només flueix el contingut fins que la columna està plena i després es dirigeix ​​al següent.

Més funcions a CSS3 que no estan incloses a CSS2

Hi ha moltes característiques addicionals en CSS3 que no existien a CSS2, incloent:

• Mòdul de disseny de plantilla CSS i mòdul de posicionament de quadrícula CSS3 : creació de quadrícules amb CSS.
• Mòdul de text CSS3 : dibuixa text i fins i tot crea ombres amb CSS.
• Mòdul de color CSS3 : ara amb opacitat.
• Canvis al model de caixa : incloent una propietat de marquesina que actua com a etiqueta IE.
• Mòdul d'interfície d'usuari de CSS3 : us ofereix nous cursors, respostes a accions, camps obligatoris i fins i tot elements de canvi de mida .
• Consultes de mitjans : les consultes de mitjans us permeten tenir més flexibilitat a l'hora de definir com s'ha d'utilitzar un full d'estils. Per exemple, podeu definir un full d'estil que només sigui per a dispositius de mà que tinguin una vista superior a 20em.
• Mòdul Ruby CSS3 : proporciona suport per a idiomes que utilitzen rubí textual per anotar documents.
• Mòdul CSS3 per a mitjans de pagament : per obtenir encara més suport per als mitjans pagats (paper, transparències, etc.).
• Contingut generat : s'executen els encapçalaments i els peus de pàgina, notes a peu de pàgina i altres continguts que es generen mitjançant programació, especialment per als mitjans de pagament.
• Mòdul de parla CSS3 : Canvis en CSS aural.