Comprender os principais cambios no CSS3
A maior diferenza entre CSS2 e CSS3 é que CSS3 dividiuse en diferentes seccións, chamadas módulos. Cada un destes módulos avanza a través do W3C en varias etapas do proceso de recomendación. Este proceso facilitou moito máis que varias pezas de CSS3 sexan aceptadas e implementadas no navegador por diferentes fabricantes.
Se comparas este proceso co que pasou con CSS2, onde todo foi enviado como un único documento con todas as informacións de Follas de estilo en cascada dentro del, comeza a ver as vantaxes de romper a recomendación en pequenas e individuais. Debido a que cada un dos módulos está a traballar individualmente, temos un rango moito máis amplo de soporte para o navegador para módulos CSS3.
Como ocorre con calquera especificación nova e cambiante, asegúrese de probar as páxinas de CSS3 completamente na maior cantidade de navegadores e sistemas operativos que poida. Lembre que o obxectivo non é crear páxinas web que sexan exactamente iguais en todos os navegadores, senón asegurarse de que os estilos que utilice, incluídos os estilos CSS3, sexan excelentes nos navegadores que os soportan e que caen graciosamente para navegadores máis antigos que non.
Novos selectores CSS3
CSS3 ofrece unha morea de novas formas de escribir regras CSS con novos selectores CSS, así como un novo combinador e algúns pseudo-elementos novos.
Tres novos selectores de atributo:
- O principio do atributo coincide exactamente co elemento [foo ^ = "bar"] O elemento ten un atributo chamado foo que comeza coa "barra", por exemplo
- O fin do atributo corresponde exactamente ao elemento [foo $ = "bar"] O elemento ten un atributo chamado foo que remata coa "barra", por exemplo
- O atributo contén o elemento de coincidencia [foo * = "bar"] O elemento ten un atributo chamado foo que contén a cadea "barra", por exemplo
16 novas pseudo clases:
- : raíz
- O elemento raíz do documento. En HTML isto sempre é.
- : nth-child (n)
- Use isto para combinar elementos menores exactos ou usar variables para obter coincidencias alternativas.
- : nth-last-child (n)
- Combina os elementos exactos do fillo contando desde o último.
- : nth-of-type (n)
- Relaciona elementos do irmán co mesmo nome que o anterior na árbore do documento.
- : nth-last-of-type (n)
- Relaciona elementos do irmán co mesmo nome que se contan desde o fondo.
- : último fillo
- Combina o último elemento secundario do pai.
- : primeiro de tipo
- Relaciona o primeiro elemento irmán dese tipo.
- : último de tipo
- Combina o último elemento do irmán dese tipo.
- :fillo único
- Coñeza o elemento que é o único fillo do seu pai.
- : só de tipo
- Combina o elemento que é o único do seu tipo.
- : baleiro
- Relaciona o elemento que non ten fillos (incluídos os nodos de texto).
- : destino
- Combina un elemento que é o obxectivo do URI de referencia.
- activado
- Combina o elemento cando está activado.
- : desactivado
- Relaciona o elemento cando está desactivado.
- verificada
- Combina o elemento cando está marcado (botón de opción ou caixa de verificación).
- : non (s)
- Concorda cando o elemento non coincide co selector simple s.
Un novo combinador:
- elementA ~ elementoB
- Concorda cando o elemento B segue nalgún lugar despois do elemento A, non necesariamente de inmediato.
Novas propiedades
CSS3 tamén introduciu unha serie de novas propiedades CSS. Moitas destas propiedades foron crear estilos visuais que probablemente asociarían máis cun programa de gráficos como o Photoshop. Algúns destes, como o radio de borde ou a caixa de sombra, estiveron en torno desde a introdución se CSS3. Outros, como a flexbox ou a grilla CSS, son estilos máis novos que a miúdo son considerados complementos CSS3.
En CSS3, o modelo de caixa non cambiou. Pero hai unha morea de propiedades de estilo novo que poden axudarche a estilear os fondos e as fronteiras das túas caixas.
Múltiplo fondo que os magos
Usando a imaxe de fondo, a posición de fondo e os estilos de repetición de fondo, pode especificar varias imaxes de fondo para estar en capas un sobre o outro na caixa. A primeira imaxe é a capa máis próxima ao usuario, coas seguintes pintadas atrás. Se hai unha cor de fondo, está pintada debaixo de todas as capas de imaxe.
Novas propiedades de estilo de fondo
Hai tamén algunhas novas propiedades de fondo en CSS3.
- clip de fondo
- Esta propiedade define como se debe cortar a imaxe de fondo. O valor predeterminado é o cadro de bordo, pero pódese cambiar á caixa de recheo ou á caixa de contido.
- orixe de fondo
- Esta propiedade determina se o fondo debería ser un lugar na caixa de acolchado, no cadro de borde ou no cadro de contido.
- tamaño de fondo
- Esta propiedade permítelle indicar o tamaño da imaxe de fondo. Permite estirar imaxes máis pequenas para axustar a páxina.
Cambios ás propiedades do estilo de fondo existentes
Tamén hai algúns cambios nas propiedades de estilo de fondo existentes:
- repetición de fondo
- Hai dous valores novos para esta propiedade: espazo e rolda. Espacios espaciais a imaxe de mosaico uniformemente dentro da caixa sen ser cortada. Round rescala a imaxe de fondo para que faga tella varias veces na caixa.
- adxunto de fondo
- Engádese un novo valor "local" para que o fondo se desprázase co contido do elemento cando o elemento teña unha barra de desprazamento.
- fondo
- A propiedade de taquigrafía de fondo engádese nas propiedades de tamaño e orixe.
Propiedades da fronteira CSS3
Nos bordos CSS3 poden ser os estilos que estamos acostumados (sólidos, dobres, trazos, etc.) ou poden ser unha imaxe. Ademais, o CSS3 ten a capacidade de crear esquinas redondeadas. As imaxes de bordo son interesantes porque creas unha imaxe das catro fronteiras e contas ao CSS como aplicar esa imaxe ás túas fronteiras.
Novas propiedades de estilo de bordo
Hai algunhas novas propiedades de bordo en CSS3:
- radio fronteirizo
- radio de riba-dereita-superior , radio de abaixo-fondo-dereito, radio de abaixo-abaixo-abaixo , radio de riba- abaixo-esquerdo
- Estas propiedades permítenlle crear cantos redondeados nas súas fronteiras.
- border-image-source
- Especifica o ficheiro de orixe da imaxe que se empregará no canto dos estilos de bordo xa definidos.
- border-image-slice
- Representa os desprazamentos internos desde os bordos da imaxe do borde
- border-image-width
- Define o valor do ancho para a súa imaxe de bordo.
- border-image-startset
- Especifica a cantidade que a área de imaxe de bordo estende máis alá da caixa de bordos.
- border-image-stretch
- Define como os lados e as partes medias da imaxe do bordo deberían estar en mosaico ou escala.
- imaxe de fronteira
- A propiedade de taquigrafía para todas as propiedades da imaxe do borde.
Propiedades CSS3 adicionais relacionadas con bordos e fondos
Cando unha caixa está rota nun salto de páxina, a ruptura da columna para o salto de liña (para os elementos en liña) a propiedade de caixa-decoración-break define como as novas caixas están envolvidas con bordo e recheo. Os fondos pódense dividir entre varias caixas rotas empregando esta propiedade.
Tamén hai unha propiedade de caixa-sombra que se pode usar para engadir sombras a elementos de caixa.
Con CSS3, agora pode configurar fácilmente unha páxina web con varias columnas sen táboas ou estruturas de etiquetas complicadas. Simplemente dígalle ao navegador cantas columnas debería ter o elemento do corpo e como deben ser. Ademais, pode engadir bordos (regras), cores de fondo que abarcan o alto da columna e o seu texto fluirá a través de todas as columnas automaticamente.
Columnas CSS3: define o número eo ancho das columnas
Hai tres novas propiedades que lle permiten definir o número eo ancho das columnas:
- ancho de columna
- Define o ancho das columnas. O navegador entón o texto para encher o espazo con columnas que son anchas.
- reconto de columnas
- Define o número de columnas na páxina. O navegador creará columnas suficientemente anchas para encaixar no espazo, pero só o número que especifique.
- columnas
- Propiedade de taquigrafía onde pode definir o ancho ou o número (ou ambos, pero raramente ten sentido).
Disposición e regras de columnas CSS3
As lagoas e as regras están situadas entre columnas no mesmo escenario multicolumano. As lagoas separarán as columnas, pero as regras non ocupan ningún espazo. Se unha regra de columna é máis ancha do que é a brecha, superará as columnas adxacentes. hai cinco novas propiedades para as regras e as lagoas de columna:
- columna-brecha
- Define o ancho das lagoas entre as columnas.
- cor da regra de columna
- Define a cor da regra.
- estilo de regra de columnas
- Define o estilo da regra (sólido, punteado, dobre, etc.).
- ancho de regra de columna
- Define o ancho da regra.
- regra de columna
- Unha propiedade de taquigrafía que define as tres propiedades da regra de columna á vez.
Fragmentos de columnas CSS3, columnas abaixadas e columnas de recheo
Os saltos de columna usan as mesmas opcións de CSS2 que se usan para definir pausas en contido paginado, pero con tres novas propiedades: break-before , break-after e break-inside .
Do mesmo xeito que coas táboas, pode configurar elementos para espallar columnas coa propiedade column-span. Isto permítelle crear titulares que abarquen varias columnas máis como un xornal.
As columnas de recheo determinan o contido que terán en cada columna. As columnas equilibradas intentan poñer a mesma cantidade de contido en cada columna mentres que o automático simplemente flúe o contido ata que a columna está chea e despois vai á seguinte.
Máis características en CSS3 que non están incluídas en CSS2
Hai moitas características adicionais en CSS3 que non existían en CSS2, incluíndo:
- Módulo de deseño de plantilla CSS e módulo de posicionamento de grella CSS3 : creación de grellas con CSS.
- Módulo de texto CSS3 : escribe texto e ata crea sombras de gota con CSS.
- Módulo de cor CSS3 : agora con opacidade.
- Cambios no modelo de caixa : Incluíndo unha propiedade de marca que actúa como a etiqueta IE.
- Módulo de interfaz de usuario CSS3 : dándolle novos cursores, respostas a accións, campos obrigatorios e ata redimensionando elementos .
- Consultas de medios : as consultas de medios permítenlle máis flexibilidade ao definir como se debe usar unha folla de estilo. Por exemplo, podería definir unha folla de estilo que só sexa para dispositivos de man que teñan unha área de visualización superior a 20em.
- Módulo Ruby CSS3 : ofrece soporte para idiomas que utilizan Ruby textual para anotar documentos.
- CSS3 Módulo Media Paged : Para aínda máis soporte para medios paginados (papel, transparencias, etc.).
- Contido xerado : encabezados e pés de páxina, notas ao pé e outros contidos que se xeran mediante programación, especialmente para os medios paginados.
- Módulo de voz CSS3 : cambios no CSS aural.