A maior diferença entre o CSS2 e o CSS3 é que o CSS3 foi dividido em diferentes seções, chamadas módulos. Cada um desses módulos está passando pelo W3C em vários estágios do processo de recomendação. Este processo tornou muito mais fácil para várias partes do CSS3 serem aceitas e implementadas no navegador por diferentes fabricantes.
Se você comparar esse processo com o que aconteceu com o CSS2, onde tudo foi enviado como um único documento com todas as informações das Folhas de estilos em cascata, você começa a ver as vantagens de dividir a recomendação em partes menores e individuais. Como cada um dos módulos está sendo trabalhado individualmente, temos uma gama muito maior de suporte a navegadores para módulos CSS3.
Como acontece com qualquer nova especificação, certifique-se de testar suas páginas CSS3 completamente em quantos navegadores e sistemas operacionais você puder. Lembre-se de que o objetivo não é criar páginas da Web que sejam exatamente iguais em todos os navegadores, mas garantir que os estilos usados, incluindo os estilos CSS3, sejam ótimos nos navegadores que os suportam e que sejam compatíveis com navegadores mais antigos. não.
Novos seletores CSS3
O CSS3 oferece várias maneiras novas de escrever regras CSS com novos seletores CSS, além de um novo combinador e alguns novos pseudo-elementos.
Três novos seletores de atributos:
- O início do atributo corresponde exatamente
elemento foo ^ = "bar" O elemento tem um atributo chamado foo que começa com "bar", e.
- O término do atributo corresponde exatamente
elemento foo $ = "bar" O elemento tem um atributo chamado foo que termina com "bar", e.
- Atributo contém a correspondência
elemento foo * = "bar" O elemento tem um atributo chamado foo que contém a string "bar", e.
16 novas pseudo-classes:
- :raiz
- O elemento raiz do documento. Em HTML isso é sempre.
- : n-filho (n)
- Use isso para corresponder a elementos filho exatos ou use variáveis para obter correspondências alternadas.
- : n-último filho (n)
- Corresponder elementos filhos exatos, contando a partir do último.
- : n-de-tipo (n)
- Corresponda elementos irmãos com o mesmo nome antes na árvore do documento.
- : nth-last-of-type (n)
- Combine elementos irmãos com o mesmo nome, contando a partir da parte inferior.
- : último filho
- Corresponde ao último elemento filho do pai.
- : primeiro do tipo
- Combine o primeiro elemento irmão desse tipo.
- : last-of-type
- Corresponde ao último elemento irmão desse tipo.
- :filho único
- Corresponda o elemento que é o único filho de seu pai.
- : somente de tipo
- Corresponda o elemento que é o único desse tipo.
- :esvaziar
- Corresponder o elemento que não tem filhos (incluindo nós de texto).
- :alvo
- Corresponder um elemento que é o destino do URI de referência.
- :ativado
- Combine o elemento quando ele estiver ativado.
- :Desativado
- Combine o elemento quando ele estiver desativado.
- :verificado
- Combine o elemento quando ele estiver marcado (botão de opção ou caixa de seleção).
- : não (s)
- Corresponde quando o elemento não corresponde ao seletor simples s.
Um novo combinador:
- elementA ~ elementB
- Corresponde quando o elemento B segue em algum lugar após o elemento A, não necessariamente imediatamente.
Novos imóveis
O CSS3 também introduziu várias novas propriedades CSS. Muitas dessas propriedades criaram estilos visuais que provavelmente associariam mais a um programa gráfico como o Photoshop. Alguns deles, como border-radius ou box-shadow, existem desde a introdução do CSS3. Outros, como o flexbox ou até mesmo o CSS Grid, são estilos mais novos que ainda são considerados adições ao CSS3.
Em CSS3, o modelo de caixa não mudou. Mas há várias novas propriedades de estilo que podem ajudá-lo a estilizar os planos de fundo e as bordas de suas caixas.
Fundo múltiplo eu magos
Usando os estilos de imagem de fundo, posição de fundo e repetição de fundo, você pode especificar várias imagens de fundo a serem sobrepostas umas sobre as outras na caixa. A primeira imagem é a camada mais próxima do usuário, com as seguintes imagens pintadas atrás. Se houver uma cor de fundo, ela será pintada abaixo de todas as camadas da imagem.
Novas propriedades de estilo de plano de fundo
Há também algumas novas propriedades de segundo plano no CSS3.
- clipe de fundo
- Esta propriedade define como a imagem de fundo deve ser cortada. O padrão é a caixa de borda, mas ela pode ser alterada para a caixa de preenchimento ou para a caixa de conteúdo.
- origem de fundo
- Essa propriedade determina se o plano de fundo deve ser lugares na caixa de preenchimento, na caixa de borda ou na caixa de conteúdo.
- tamanho de fundo
- Esta propriedade permite indicar o tamanho da imagem de fundo. Permite esticar imagens menores para caber na página.
Alterações nas propriedades de estilo de plano de fundo existentes
Há também algumas alterações nas propriedades de estilo de plano de fundo existentes:
- fundo de repetição
- Existem dois novos valores para essa propriedade: espaço e arredondamento. Espaços espaciais a imagem lado a lado uniformemente dentro da caixa sem ser cortado. Round redimensiona a imagem de fundo para que ela seja exibida um número inteiro de vezes na caixa.
- fundo de ligação
- Um novo valor "local" é adicionado para que o plano de fundo role com o conteúdo do elemento quando esse elemento tiver uma barra de rolagem.
- fundo
- A propriedade de atalho em segundo plano é adicionada nas propriedades de tamanho e origem.
Propriedades da Borda CSS3
Em CSS3, as bordas podem ser os estilos que estamos acostumados (sólido, duplo, tracejado, etc.) ou podem ser uma imagem. Além disso, o CSS3 traz a capacidade de criar cantos arredondados.As imagens de borda são interessantes porque você cria uma imagem de todas as quatro bordas e depois informa ao CSS como aplicar essa imagem às suas bordas.
Novas propriedades de estilo de borda
Existem algumas novas propriedades de borda no CSS3:
- raio de borda
- border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius
- Essas propriedades permitem que você crie cantos arredondados em suas bordas.
- border-image-source
- Especifica o arquivo de origem da imagem a ser usado em vez dos estilos de borda já definidos.
- fatia de imagem de borda
- Representa os deslocamentos internos das bordas da imagem da borda
- borda-imagem-largura
- Define o valor da largura da sua imagem de borda.
- border-image-outset
- Especifica o valor que a área da imagem da borda se estende além da caixa da borda.
- border-image-stretch
- Define como os lados e partes do meio da imagem da borda devem ser lado a lado ou dimensionados.
- border-image
- A propriedade abreviada para todas as propriedades da imagem da borda.
Propriedades adicionais do CSS3 relacionadas a bordas e planos de fundo
Quando uma caixa é quebrada em uma quebra de página, quebra de linha para quebra de linha (para elementos in-line) a propriedade box-decoration-break define como as novas caixas são agrupadas com borda e preenchimento. Os fundos podem ser divididos entre várias caixas quebradas usando essa propriedade.
Há também uma propriedade box-shadow que pode ser usada para adicionar sombras aos elementos da caixa.
Com CSS3, agora você pode facilmente configurar uma página da Web com várias colunas sem tabelas ou estruturas de tags div complicadas. Você simplesmente diz ao navegador quantas colunas o elemento do corpo deve ter e o tamanho que deve ter. Além disso, você pode adicionar bordas (regras), cores de fundo que abrangem a altura da coluna, e seu texto fluirá por todas as colunas automaticamente.
Colunas CSS3 - Definir o número e a largura das colunas
Existem três novas propriedades que permitem definir o número e a largura de suas colunas:
- largura da coluna
- Define a largura que suas colunas devem ser. O navegador então fluirá o texto para preencher o espaço com colunas dessa largura.
- contagem de colunas
- Define o número de colunas na página. O navegador criará colunas com largura suficiente para caber no espaço, mas apenas o número que você especificar.
- colunas
- Propriedade de taquigrafia onde você pode definir a largura ou o número (ou ambos, mas isso raramente faz sentido).
Lacunas e Regras da Coluna CSS3
Lacunas e regras são colocadas entre colunas no mesmo cenário de várias colunas. As lacunas separam as colunas, mas as regras não ocupam espaço. Se uma regra de coluna for mais larga que sua lacuna, ela se sobreporá a colunas adjacentes. Há cinco novas propriedades para regras de coluna e lacunas:
- lacuna de coluna
- Define a largura das lacunas entre as colunas.
- coluna-regra-cor
- Define a cor da regra.
- estilo de regra de coluna
- Define o estilo da regra (sólido, pontilhado, duplo, etc.).
- coluna-regra-largura
- Define a largura da regra.
- regra de coluna
- Uma propriedade abreviada que define todas as três propriedades de regra de coluna de uma só vez.
Quebras de coluna CSS3, colunas de preenchimento e colunas de preenchimento
As quebras de coluna usam as mesmas opções CSS2 usadas para definir as quebras no conteúdo paginado, mas com três novas propriedades: pausa antes, pausa apóse arrombamento.
Como nas tabelas, você pode definir elementos para dividir colunas com a propriedade column-span. Isso permite criar títulos que abrangem várias colunas mais como um jornal.
Colunas de preenchimento decide quanto conteúdo será em cada coluna. Colunas balanceadas tentam colocar a mesma quantidade de conteúdo em cada coluna, enquanto auto apenas flui o conteúdo até que a coluna esteja cheia e, em seguida, vá para a próxima.
Mais recursos em CSS3 que não estão incluídos no CSS2
Existem muitos recursos adicionais no CSS3 que não existiam no CSS2, incluindo:
- Módulo de layout de modelo CSS e módulo de posicionamento de grade CSS3: Criando grades com CSS.
- Módulo de texto CSS3: Descreva o texto e até mesmo crie sombras com CSS.
- Módulo de cor CSS3: Agora com opacidade.
- Alterações no modelo de caixa: Incluindo uma propriedade de letreiro que funciona como a tag do IE.
- Módulo de interface de usuário CSS3: Dando-lhe novos cursores, respostas a ações, campos obrigatórios e até mesmo redimensionando elementos.
- Consultas de mídia: Consultas de mídia permitem mais flexibilidade ao definir como uma folha de estilos deve ser usada. Por exemplo, você pode definir uma folha de estilo que seja apenas para dispositivos portáteis que tenham uma viewport maior que 20em.
- Módulo de Ruby CSS3: Fornece suporte para idiomas que usam o ruby textual para anotar documentos.
- Módulo de Mídia Paginada CSS3: Para ainda mais suporte para mídia paginada (papel, transparências, etc).
- Conteúdo gerado: L executando cabeçalhos e rodapés, notas de rodapé e outros conteúdos gerados programaticamente, especialmente para mídia paginada.
- Módulo de fala CSS3: Alterações no CSS auditivo.
