CSS

Cascading Style Sheets (CSS)

Extensão de nome de arquivo	.css
Tipo de mídia da Internet	texto / css
Identificador de tipo uniforme (UTI)	public.css
Desenvolvido por	World Wide Web Consortium (W3C)
lançamento inicial	17 de dezembro de 1996 ; 24 anos atrás ( 1996-12-17 )
Último lançamento	CSS 2.1: Nível 2 Revisão 1 (12 de abril de 2016 ; 5 anos atrás ) ( 12/04/2016 )
Tipo de formato	Linguagem da folha de estilo
Recipiente para	Regras de estilo para elementos HTML (tags)
Contido por	Documentos HTML
Formato aberto ?	sim
Local na rede Internet	www .w3 .org / TR / CSS / #css

Cascading Style Sheets ( CSS ) é uma linguagem de folha de estilo usada para descrever a apresentação de um documento escrito em uma linguagem de marcação , como HTML . ^[1] CSS é uma tecnologia fundamental da World Wide Web , junto com HTML e JavaScript . ^[2]

CSS é projetado para permitir a separação de apresentação e conteúdo, incluindo layout , cores e fontes . ^[3] Essa separação pode melhorar a acessibilidade do conteúdo ; fornecer mais flexibilidade e controle na especificação das características de apresentação; permitir que várias páginas da web compartilhem a formatação especificando o CSS relevante em um arquivo .css separado, o que reduz a complexidade e a repetição no conteúdo estrutural; e permitir que o arquivo .css seja armazenado em cache para melhorar a velocidade de carregamento da página entre as páginas que compartilham o arquivo e sua formatação.

A separação de formatação e conteúdo também torna viável apresentar a mesma página de marcação em estilos diferentes para métodos de renderização diferentes, como na tela, impressa, por voz (via navegador baseado em fala ou leitor de tela ) e baseado em Braille dispositivos táteis. CSS também tem regras para formatação alternativa se o conteúdo for acessado em um dispositivo móvel . ^[4]

O nome em cascata vem do esquema de prioridade especificado para determinar qual regra de estilo se aplica se mais de uma regra corresponder a um elemento específico. Este esquema de prioridade em cascata é previsível.

As especificações CSS são mantidas pelo World Wide Web Consortium (W3C). O tipo de mídia da Internet (tipo MIME ) text/cssé registrado para uso com CSS pela RFC 2318 (março de 1998). O W3C opera um serviço gratuito de validação CSS para documentos CSS. ^[5]

Além do HTML, outras linguagens de marcação suportam o uso de CSS, incluindo XHTML , XML simples , SVG e XUL .

Sintaxe

CSS tem uma sintaxe simples e usa várias palavras-chave em inglês para especificar os nomes de várias propriedades de estilo.

Uma folha de estilo consiste em uma lista de regras . Cada regra ou conjunto de regras consiste em um ou mais seletores e um bloco de declaração .

Seletor

Em CSS, os seletores declaram a qual parte da marcação um estilo se aplica, combinando tags e atributos na própria marcação.

Os seletores podem se aplicar ao seguinte:

• todos os elementos de um tipo específico, por exemplo, os cabeçalhos de segundo nível h2
• elementos especificados por atributo , em particular:
  • id : um identificador único dentro do documento, identificado com um prefixo hash, por exemplo#id
  • classe : um identificador que pode anotar vários elementos em um documento, identificado com um prefixo de período, por exemplo.classname
• elementos dependendo de como eles são colocados em relação a outros na árvore do documento .

Classes e IDs diferenciam maiúsculas de minúsculas, começam com letras e podem incluir caracteres alfanuméricos, hifens e sublinhados. Uma classe pode ser aplicada a qualquer número de instâncias de quaisquer elementos. Um ID só pode ser aplicado a um único elemento.

Pseudo-classes são usadas em seletores CSS para permitir a formatação com base em informações que não estão contidas na árvore do documento. Um exemplo de pseudoclasse amplamente usada é , que identifica o conteúdo apenas quando o usuário "aponta para" o elemento visível, geralmente mantendo o cursor do mouse sobre ele. É anexado a um seletor como em ou . Uma pseudo-classe classifica os elementos do documento, como ou , enquanto um pseudo-elemento faz uma seleção que pode consistir em elementos parciais, como ou . ^[6]:hovera:hover#elementid:hover:link:visited::first-line::first-letter

Os seletores podem ser combinados de várias maneiras para atingir grande especificidade e flexibilidade. ^[7] Múltiplos seletores podem ser unidos em uma lista espaçada para especificar elementos por localização, tipo de elemento, id, classe ou qualquer combinação dos mesmos. A ordem dos seletores é importante. Por exemplo, se aplica a todos os elementos da classe myClass que estão dentro dos elementos div, enquanto se aplica a todos os elementos div que estão dentro dos elementos da classe myClass. Isso não deve ser confundido com identificadores concatenados, como os que se aplicam a elementos div da classe myClass. div .myClass {color: red;}.myClass div {color: red;}div.myClass {color: red;}

A tabela a seguir fornece um resumo da sintaxe do seletor, indicando o uso e a versão do CSS que o introduziu. ^[8]

Bloco de declaração

Um bloco de declaração consiste em uma lista de declarações entre colchetes. Cada declaração consiste em uma propriedade , dois pontos ( :) e um valor . Se houver várias declarações em um bloco, um ponto e vírgula ( ;) deve ser inserido para separar cada declaração. Um opcional pode ser utilizado semi-cólon após o último (ou único) declaração. ^[9]

As propriedades são especificadas no padrão CSS. Cada propriedade possui um conjunto de valores possíveis. Algumas propriedades podem afetar qualquer tipo de elemento e outras se aplicam apenas a grupos específicos de elementos. ^{[10] [11]}

Os valores podem ser palavras-chave, como "centro" ou "herdar", ou valores numéricos, como 200px(200 pixels), 50vw(50 por cento da largura da janela de visualização) ou 80% (80 por cento da largura do elemento pai). Os valores de cor podem ser especificados com palavras-chave (por exemplo, " "), valores hexadecimais (por exemplo , também abreviado como ), valores RGB em uma escala de 0 a 255 (por exemplo ), valores RGBA que especificam tanto a cor quanto a transparência alfa (por exemplo ), ou HSL ou valores HSLA (por exemplo , ). ^[12]red#FF0000#F00rgb(255, 0, 0)rgba(255, 0, 0, 0.8)hsl(000, 100%, 50%)hsla(000, 100%, 50%, 80%)

Unidades de comprimento

Os valores numéricos diferentes de zero que representam medidas lineares devem incluir uma unidade de comprimento, que é um código alfabético ou abreviatura, como em 200pxou 50vw; ou um sinal de porcentagem, como em 80%. Algumas unidades - cm( centímetro ); in( polegada ); mm( milímetro ); pc( pica ); e pt( ponto ) - são absolutos , o que significa que a dimensão renderizada não depende da estrutura da página; outros - em( em ); ex( ex ) e px( pixel ) - são relativos, o que significa que fatores como o tamanho da fonte de um elemento pai podem afetar a medida renderizada. Essas oito unidades eram uma característica do CSS 1 ^[13] e mantidas em todas as revisões subsequentes. Os valores CSS propostas e Unidades Módulo Nível 3 vontade, se adotado como uma Recomendação W3C, fornecer unidades de comprimento mais sete: ch; Q; rem; vh; vmax; vmin; e vw. ^[14]

Use

Antes do CSS, quase todos os atributos de apresentação de documentos HTML estavam contidos na marcação HTML. Todas as cores de fonte, estilos de fundo, alinhamentos de elementos, bordas e tamanhos tiveram que ser explicitamente descritos, muitas vezes repetidamente, no HTML. CSS permite que os autores movam muitas dessas informações para outro arquivo, a folha de estilo, resultando em um HTML consideravelmente mais simples.

Por exemplo, títulos ( h1elementos), subtítulos ( h2), sub-subtítulos ( h3), etc., são definidos estruturalmente usando HTML. Na impressão e na tela, a escolha da fonte , tamanho , cor e ênfase para esses elementos é de apresentação .

Antes do CSS, os autores de documentos que desejavam atribuir tais características tipográficas a, digamos, todos os h2títulos tinham que repetir a marcação HTML de apresentação para cada ocorrência daquele tipo de título. Isso tornou os documentos mais complexos, maiores e mais sujeitos a erros e difíceis de manter. CSS permite separar a apresentação da estrutura. CSS pode definir cor, fonte, alinhamento de texto, tamanho, bordas, espaçamento, layout e muitas outras características tipográficas, e pode fazer isso independentemente para visualizações na tela e impressas. CSS também define estilos não visuais, como velocidade de leitura e ênfase para leitores de texto auditivo. O W3C tem agora obsoleto o uso de todos os marcação HTML de apresentação. ^[15]

Por exemplo, em HTML pré-CSS, um elemento de título definido com texto em vermelho seria escrito como:

< h1 > < font  color = "red" > Capítulo 1. </ font > </ h1 >

Usando CSS, o mesmo elemento pode ser codificado usando propriedades de estilo em vez de atributos de apresentação HTML:

< h1  style = "color: red;" > Capítulo 1. </ h1 >

As vantagens disso podem não ser imediatamente claras, mas o poder do CSS se torna mais aparente quando as propriedades de estilo são colocadas em um elemento de estilo interno ou, melhor ainda, em um arquivo CSS externo. Por exemplo, suponha que o documento contenha o elemento de estilo:

< estilo > 
    h1  { 
        cor :  vermelho ; 
    } 
</ estilo >

Todos os h1elementos do documento ficarão vermelhos automaticamente, sem exigir nenhum código explícito. Se o autor posteriormente quisesse tornar os h1elementos azuis, isso poderia ser feito alterando o elemento de estilo para:

< estilo > 
    h1  { 
        cor :  azul ; 
    } 
</ estilo >

em vez de percorrer laboriosamente o documento e alterar a cor de cada h1elemento individual .

Os estilos também podem ser colocados em um arquivo CSS externo, conforme descrito abaixo, e carregados usando uma sintaxe semelhante a:

< link  href = "path / to / file.css"  rel = "stylesheet"  type = "text / css" >

Isso separa ainda mais o estilo do documento HTML e torna possível remodelar vários documentos simplesmente editando um arquivo CSS externo compartilhado.

Fontes

As informações CSS podem ser fornecidas de várias fontes. Essas fontes podem ser o navegador da web, o usuário e o autor. As informações do autor podem ser classificadas em sequenciais, tipo de mídia, importância, especificidade do seletor, ordem de regra, herança e definição de propriedade. As informações de estilo CSS podem estar em um documento separado ou podem ser incorporadas a um documento HTML. Múltiplas folhas de estilo podem ser importadas. Estilos diferentes podem ser aplicados dependendo do dispositivo de saída que está sendo usado; por exemplo, a versão em tela pode ser bem diferente da versão impressa, de modo que os autores podem personalizar a apresentação de forma adequada para cada meio.

A folha de estilo com a prioridade mais alta controla a exibição do conteúdo. As declarações não definidas na fonte de prioridade mais alta são passadas para uma fonte de prioridade mais baixa, como o estilo do agente do usuário. O processo é chamado de cascata .

Um dos objetivos do CSS é permitir aos usuários maior controle sobre a apresentação. Alguém que acha difícil ler os títulos em itálico vermelho pode aplicar uma folha de estilo diferente. Dependendo do navegador e do site, um usuário pode escolher entre várias folhas de estilo fornecidas pelos designers, ou pode remover todos os estilos adicionados e visualizar o site usando o estilo padrão do navegador, ou pode substituir apenas o estilo do título itálico vermelho sem alterar outro atributos.

Especificidade

A especificidade se refere aos pesos relativos de várias regras. ^[16] Ele determina quais estilos se aplicam a um elemento quando mais de uma regra pode ser aplicada. Com base na especificação, um seletor simples (por exemplo, H1) tem uma especificidade de 1, os seletores de classe têm uma especificidade de 1,0 e os seletores de ID uma especificidade de 1,0,0. Como os valores de especificidade não são transportados como no sistema decimal, vírgulas são usadas para separar os "dígitos" ^[17] (uma regra CSS com 11 elementos e 11 classes teria uma especificidade de 11,11, não 121).

Assim, os seguintes seletores de regras resultam na especificidade indicada:

Exemplos

Considere este fragmento de HTML:

<! DOCTYPE html> 
< html > 
    < head > 
        < meta  charset = "utf-8" > 
        < style > 
            # xyz  {  color :  blue ;  } 
        </ style > 
    </ head > 
    < body > 
        < p  id = "xyz"  style = "color: green;" > Para demonstrar especificidade </ p > 
    </ body > 
</ html >

No exemplo acima, a declaração no styleatributo substitui a do <style>elemento porque tem uma especificidade mais alta e, portanto, o parágrafo aparece em verde.

Herança

Herança é um recurso chave em CSS; ele depende do relacionamento ancestral-descendente para operar. Herança é o mecanismo pelo qual as propriedades são aplicadas não apenas a um elemento especificado, mas também a seus descendentes. ^{[16] A} herança depende da árvore do documento, que é a hierarquia do XHTMLelementos em uma página com base no aninhamento. Elementos descendentes podem herdar valores de propriedade CSS de qualquer elemento ancestral que os inclua. Em geral, os elementos descendentes herdam as propriedades relacionadas ao texto, mas suas propriedades relacionadas à caixa não são herdadas. As propriedades que podem ser herdadas são cor, fonte, espaçamento entre letras, altura da linha, estilo de lista, alinhamento do texto, indentação do texto, transformação do texto, visibilidade, espaço em branco e espaçamento entre palavras. As propriedades que não podem ser herdadas são background, border, display, float and clear, height e width, margin, min- and max-height e -width, contorno, overflow, padding, position, text-decoration, vertical-align e z -índice.

A herança pode ser usada para evitar a declaração de certas propriedades repetidamente em uma folha de estilo, permitindo CSS mais curto.

Herança em CSS não é o mesmo que herança em linguagens de programação baseadas em classes , onde é possível definir a classe B como "semelhante à classe A, mas com modificações". ^[18] Com CSS, é possível estilizar um elemento com "classe A, mas com modificações". No entanto, não é possível definir uma classe CSS B como essa, que poderia então ser usada para estilizar vários elementos sem ter que repetir as modificações.

Exemplo

Dada a seguinte folha de estilo:

h1  { 
   cor :  rosa ; 
}

Suponha que haja um elemento h1 com um elemento de ênfase (em) dentro de:

< h1 > 
   Isso é para < em > ilustrar </ em > herança
 </ h1 >

Se nenhuma cor for atribuída ao elemento em, a palavra enfatizada "ilustrar" herda a cor do elemento pai, h1. A folha de estilo h1 tem a cor rosa, portanto, o elemento em também é rosa.

Espaço em branco

Espaços em branco entre propriedades e seletores são ignorados. Este snippet de código:

corpo { estouro : oculto ; plano de fundo : # 000000 ; imagem de fundo : url ( images / bg.gif ); repetição de fundo : sem repetição ; posição de fundo : topo esquerdo  ;}

é funcionalmente equivalente a este:

corpo  { 
   estouro :  oculto ; 
   cor de fundo :  # 000000 ; 
   imagem de fundo :  url ( images / bg.gif ); 
   repetição de fundo :  sem repetição ; 
   posição de fundo :  topo esquerdo  ; }

Uma maneira comum de formatar CSS para facilitar a leitura é indentar cada propriedade e dar a ela sua própria linha. Além de formatar CSS para facilitar a leitura, as propriedades abreviadas podem ser usadas para escrever o código mais rápido, que também é processado mais rapidamente ao ser renderizado: ^[19]

corpo  { 
   estouro :  oculto ; 
   plano de fundo :  # 000  url ( images / bg.gif )  sem repetição  superior esquerdo  ; }

Posicionamento

CSS 2.1 define três esquemas de posicionamento:

Fluxo normal

Os itens embutidos são dispostos da mesma maneira que as letras das palavras no texto, uma após a outra no espaço disponível até que não haja mais espaço, iniciando uma nova linha abaixo. Os itens do bloco são empilhados verticalmente, como parágrafos e como os itens em uma lista com marcadores. O fluxo normal também inclui o posicionamento relativo do bloco ou itens em linha e caixas de inserção.

Flutuadores

Um item flutuante é retirado do fluxo normal e deslocado para a esquerda ou direita o máximo possível no espaço disponível. Outro conteúdo flui junto com o item flutuante.

Posicionamento absoluto

Um item posicionado absolutamente não tem lugar e nenhum efeito sobre o fluxo normal de outros itens. Ele ocupa a posição atribuída em seu contêiner, independentemente de outros itens. ^[20]

Propriedade de posição

Existem cinco valores possíveis para a positionpropriedade. Se um item é posicionado em qualquer outra forma que static, em seguida, as outras propriedades top, bottom, left, e rightsão usadas para especificar deslocamentos e positions.The elemento estático tendo posição não é afectado por o top, bottom, leftou rightpropriedades.

Estático

O valor padrão coloca o item no fluxo normal

Relativo

O item é colocado no fluxo normal e, em seguida, deslocado ou deslocado dessa posição. Os itens de fluxo subsequentes são dispostos como se o item não tivesse sido movido.

Absoluto

Especifica o posicionamento absoluto . O elemento é posicionado em relação ao seu ancestral não estático mais próximo.

Fixo

O item é absolutamente posicionado em uma posição fixa na tela, mesmo quando o resto do documento é rolado ^[20]

Flutue e limpe

A floatpropriedade pode ter um de três valores. Itens absolutamente posicionados ou fixos não podem ser flutuados. Outros elementos normalmente fluem em torno de itens flutuantes, a menos que sejam impedidos de fazê-lo por sua clearpropriedade.

deixou

O item flutua à esquerda da linha em que deveria aparecer; outros itens podem fluir em torno de seu lado direito.

direito

O item flutua à direita da linha em que deveria aparecer; outros itens podem fluir em torno de seu lado esquerdo.

Claro

Força o elemento a aparecer abaixo ('limpar') de elementos flutuantes à esquerda ( ), à direita ( ) ou em ambos os lados ( ). ^{[20] [21]}clear:leftclear:rightclear:both

História

Håkon Wium Lie , diretor técnico da empresa Opera Software e co-criador dos padrões da web CSS

CSS foi proposto pela primeira vez por Håkon Wium Lie em 10 de outubro de 1994. ^[22] Na época, Lie estava trabalhando com Tim Berners-Lee no CERN . ^[23] Várias outras linguagens de folha de estilo para a web foram propostas ao mesmo tempo, e discussões em listas de correio públicas e dentro do World Wide Web Consortium resultaram na primeira recomendação W3C CSS (CSS1) ^[24] sendo lançada em 1996. Em particular , uma proposta de Bert Bos foi influente; ele se tornou co-autor do CSS1 e é considerado co-criador do CSS. ^[25]

As folhas de estilo existem de uma forma ou de outra desde o início da Standard Generalized Markup Language ( SGML ) na década de 1980, e o CSS foi desenvolvido para fornecer folhas de estilo para a web. ^[26] Um requisito para uma linguagem de folha de estilo da web era que as folhas de estilo viessem de diferentes fontes na web. Portanto, as linguagens de folha de estilo existentes, como DSSSL e FOSI , não eram adequadas. CSS, por outro lado, permite que o estilo de um documento seja influenciado por várias folhas de estilo por meio de estilos "em cascata". ^[26]

À medida que o HTML cresceu, passou a abranger uma ampla variedade de recursos estilísticos para atender às demandas dos desenvolvedores da web . Essa evolução deu ao designer mais controle sobre a aparência do site, ao custo de um HTML mais complexo. Variações nas implementações do navegador da web , como ViolaWWW e WorldWideWeb , ^[27] dificultaram a aparência consistente do site e os usuários tiveram menos controle sobre como o conteúdo da web era exibido. O navegador / editor desenvolvido por Tim Berners-Lee tinha folhas de estilo embutidas no programa. Portanto, as folhas de estilo não podiam ser vinculadas a documentos na web. ^[23] Robert Cailliau, também do CERN, queria separar a estrutura da apresentação para que diferentes folhas de estilo pudessem descrever diferentes apresentações para impressão, apresentações baseadas em tela e editores. ^[27]

Melhorar as capacidades de apresentação na web foi um tópico de interesse para muitos na comunidade da web e nove linguagens de folha de estilo diferentes foram propostas na lista de correio estilo www. ^[26] Destas nove propostas, duas foram especialmente influentes no que se tornou CSS: Cascading HTML Style Sheets ^[22] e Stream-based Style Sheet Proposal (SSP). ^{[25] [28]} Dois navegadores serviram como testbeds para as propostas iniciais; Lie trabalhou com Yves Lafon para implementar CSS em Dave Raggett 's Arena browser. ^{[29] [30] [31]} Bert Bos implementou sua própria proposta de SSP no navegador Argo . ^[25]Depois disso, Lie e Bos trabalharam juntos para desenvolver o padrão CSS (o 'H' foi removido do nome porque essas folhas de estilo também podiam ser aplicadas a outras linguagens de marcação além de HTML). ^[23]

A proposta de Lie foi apresentada na conferência " Mosaic and the Web " (mais tarde chamada de WWW2) em Chicago, Illinois em 1994, e novamente com Bert Bos em 1995. ^[23] Nessa época, o W3C já estava sendo estabelecido e se interessou no desenvolvimento de CSS. Organizou um workshop dirigido por Steven Pemberton . Isso resultou no W3C adicionando trabalho em CSS aos resultados do conselho de revisão editorial (ERB) de HTML. Lie e Bos foram a equipe técnica principal neste aspecto do projeto, com membros adicionais, incluindo Thomas Reardon da Microsoft, participando também. Em agosto de 1996, a Netscape Communication Corporation apresentou uma linguagem de folha de estilo alternativa chamadaFolhas de estilo JavaScript (JSSS). ^[23] A especificação nunca foi concluída e está obsoleta. ^[32] No final de 1996, o CSS estava pronto para se tornar oficial, e a recomendação de nível 1 do CSS foi publicada em dezembro.

O desenvolvimento de HTML, CSS e DOM ocorria em um grupo, o Comitê de Revisão Editorial HTML (ERB). No início de 1997, o ERB foi dividido em três grupos de trabalho: HTML Working group , presidido por Dan Connolly do W3C; Grupo de trabalho DOM, presidido por Lauren Wood da SoftQuad ; e CSS Working group , presidido por Chris Lilley do W3C.

O CSS Working Group começou a abordar questões que não haviam sido abordadas com CSS nível 1, resultando na criação do CSS nível 2 em 4 de novembro de 1997. Foi publicado como uma recomendação do W3C em 12 de maio de 1998. CSS nível 3, que era iniciado em 1998, ainda está em desenvolvimento em 2014.

Em 2005, os Grupos de Trabalho CSS decidiram fazer cumprir os requisitos de padrões de forma mais estrita. Isso significa que os padrões já publicados, como CSS 2.1, Seletores CSS 3 e Texto CSS 3, foram retirados do nível de Recomendação do Candidato para o nível de Rascunho de Trabalho.

Dificuldade com a adoção

A especificação CSS 1 foi concluída em 1996. O Internet Explorer 3 da Microsoft ^[23] foi lançado naquele ano, apresentando algum suporte limitado para CSS. O IE 4 e o Netscape 4.x adicionaram mais suporte, mas normalmente estava incompleto e tinha muitos bugs que impediam que o CSS fosse adotado de forma útil. Passaram-se mais de três anos antes que qualquer navegador da web alcançasse a implementação quase completa da especificação. O Internet Explorer 5.0 para Macintosh , lançado em março de 2000, foi o primeiro navegador a ter suporte total (melhor que 99 por cento) CSS 1, ^[33] ultrapassando o Opera, que era o líder desde a introdução do suporte CSS quinze meses antes. Outros navegadores surgiram logo depois, e muitos deles implementaram adicionalmente partes do CSS 2. ^{[ carece de fontes? ]}

No entanto, mesmo quando os navegadores da 'versão 5' posteriores começaram a oferecer uma implementação bastante completa de CSS, eles ainda estavam incorretos em certas áreas e repletos de inconsistências, bugs e outras peculiaridades . O Microsoft Internet Explorer 5.x para Windows , ao contrário do muito diferente IE para Macintosh , tinha uma implementação falha do ' modelo de caixa CSS ', em comparação com os padrões CSS. Essas inconsistências e variações no suporte de recursos dificultaram para os designers obter uma aparência consistente em navegadores e plataformas sem o uso de soluções alternativas chamadas de hacks e filtros CSS . Os bugs do modelo de caixa do IE / Windows eram tão sérios que, quandoO Internet Explorer 6 foi lançado, a Microsoft introduziu um modo compatível com versões anteriores de interpretação CSS (' modo quirks ') ao lado de um 'modo padrão' alternativo corrigido. Outros navegadores que não são da Microsoft também forneceram esse recurso de comportamento de alternância de 'modo'. Portanto, tornou-se necessário que os autores de arquivos HTML garantissem que continham um marcador especial distinto de 'CSS compatível com os padrões' para mostrar que os autores pretendiam que o CSS fosse interpretado corretamente, em conformidade com os padrões, em vez de ser planejado por muito tempo. navegador IE5 / Windows obsoleto. Sem esse marcador, os navegadores da web que possuem o recurso de alternância de 'modo quirks' dimensionarão os objetos nas páginas da web como o IE5 / Windows faria, em vez de seguir os padrões CSS. ^{[ citação necessária ]}

Problemas com a adoção irregular de CSS, junto com errata na especificação original, levaram o W3C a revisar o padrão CSS 2 para CSS 2.1, que se aproximou de um instantâneo de trabalho do suporte CSS atual em navegadores HTML. Algumas propriedades CSS 2 que nenhum navegador implementou com sucesso foram eliminadas e, em alguns casos, comportamentos definidos foram alterados para alinhar o padrão com as implementações existentes predominantes. O CSS 2.1 tornou-se uma recomendação candidata em 25 de fevereiro de 2004, mas o CSS 2.1 voltou ao status de Working Draft em 13 de junho de 2005, ^[34] e só voltou ao status de recomendação candidata em 19 de julho de 2007. ^[35]

Além desses problemas, a .cssextensão foi usada por um produto de software usado para converter arquivos PowerPoint em arquivos Compact Slide Show, ^[36] então alguns servidores web serviram todos .css^[37] como tipo MIME application/x-pointplus^[38] ao invés de text/css.

Prefixos de fornecedor

Fornecedores de navegadores individuais ocasionalmente introduziam novos parâmetros antes da padronização e universalização. Para evitar interferir com implementações futuras, fornecedores prefixado nomes exclusivos para os parâmetros, tais como -moz-a Mozilla Firefox , -webkit-nomeado após o motor de navegação da Apple Safari , -o-para Opera Browser e -ms-para Microsoft Internet Explorer .

Ocasionalmente, os parâmetros com prefixo de fornecedor, como -moz-radial-gradiente -webkit-linear-gradienttêm sintaxe ligeiramente diferente em comparação com suas contrapartes de prefixo de não fornecedor. ^[39]

As propriedades com prefixo tornam-se obsoletas no momento da padronização. Os programas estão disponíveis para adicionar prefixos automaticamente para navegadores mais antigos e para apontar versões padronizadas de parâmetros prefixados. Como os prefixos são limitados a um pequeno subconjunto de navegadores, a remoção do prefixo permite que outros navegadores vejam a funcionalidade. Uma exceção são certas -webkit-propriedades prefixadas obsoletas , que são tão comuns e persistentes na web que outras famílias de navegadores decidiram oferecer suporte para compatibilidade. ^[40]

Variações

CSS tem vários níveis e perfis. Cada nível de CSS se baseia no último, geralmente adicionando novos recursos e normalmente denotado como CSS 1, CSS 2, CSS 3 e CSS 4. Os perfis são normalmente um subconjunto de um ou mais níveis de CSS criados para um determinado dispositivo ou interface de usuário . Atualmente, existem perfis para dispositivos móveis, impressoras e aparelhos de televisão. Os perfis não devem ser confundidos com os tipos de mídia, que foram adicionados no CSS 2.

CSS 1

A primeira especificação CSS a se tornar uma recomendação oficial do W3C é o CSS nível 1, publicado em 17 de dezembro de 1996. Håkon Wium Lie e Bert Bos são creditados como os desenvolvedores originais. ^{[41] [42]} Entre seus recursos estão o suporte para

• Propriedades da fonte , como tipo de letra e ênfase
• Cor do texto, planos de fundo e outros elementos
• Atributos de texto, como espaçamento entre palavras, letras e linhas de texto
• Alinhamento de texto, imagens, tabelas e outros elementos
• Margem, borda, preenchimento e posicionamento para a maioria dos elementos
• Identificação única e classificação genérica de grupos de atributos

O W3C não mantém mais a recomendação CSS 1. ^[43]

CSS 2

A especificação CSS de nível 2 foi desenvolvida pelo W3C e publicada como recomendação em maio de 1998. Um superconjunto de CSS 1, CSS 2 inclui uma série de novos recursos, como posicionamento absoluto, relativo e fixo de elementos e z-index , o conceito de tipos de mídia, suporte para folhas de estilo aural (que foram posteriormente substituídas pelos módulos de fala CSS 3) ^[44] e texto bidirecional e novas propriedades de fonte, como sombras.

O W3C não mantém mais a recomendação CSS 2. ^[45]

CSS 2.1

O CSS de nível 2 revisão 1, frequentemente referido como "CSS 2.1", corrige erros no CSS 2, remove recursos com suporte insuficiente ou não totalmente interoperáveis ​​e adiciona extensões de navegador já implementadas à especificação. Para cumprir o Processo W3C para padronizar as especificações técnicas, o CSS 2.1 alternou entre o status de Rascunho de Trabalho e o status de Recomendação de Candidato por muitos anos. O CSS 2.1 tornou-se uma Recomendação Candidata em 25 de fevereiro de 2004, mas foi revertido para um Rascunho de Trabalho em 13 de junho de 2005 para revisão posterior. Retornou à Recomendação do Candidato em 19 de julho de 2007 e, em seguida, foi atualizada duas vezes em 2009. No entanto, como foram feitas alterações e esclarecimentos, voltou novamente para a Versão de Trabalho da Última Chamada em 7 de dezembro de 2010.

O CSS 2.1 foi para a recomendação proposta em 12 de abril de 2011. ^[46] Depois de ser revisado pelo Comitê Consultivo do W3C, foi finalmente publicado como uma recomendação do W3C em 7 de junho de 2011. ^[47]

O CSS 2.1 foi planejado como a primeira e última revisão do nível 2, mas o trabalho de baixa prioridade no CSS 2.2 começou em 2015.

CSS 3

Ao contrário do CSS 2, que é uma grande especificação única que define vários recursos, o CSS 3 é dividido em vários documentos separados chamados "módulos". Cada módulo adiciona novos recursos ou estende recursos definidos no CSS 2, preservando a compatibilidade com versões anteriores. O trabalho no CSS nível 3 começou na época da publicação da recomendação original do CSS 2. Os primeiros rascunhos do CSS 3 foram publicados em junho de 1999. ^[48]

Devido à modularização, diferentes módulos têm diferentes estabilidade e status. ^[49]

Alguns módulos têm status de recomendação de candidato ( CR ) e são considerados moderadamente estáveis. No estágio de CR , as implementações são aconselhadas a descartar os prefixos do fornecedor. ^[50]

CSS 4

Tocar mídia

Jen Simmons discutindo o estado do CSS em 2019, conforme vários  módulos CSS 4 estavam sendo avançados

Não há uma especificação CSS4 única e integrada, ^[52] porque a especificação foi dividida em muitos módulos separados que são nivelados independentemente.

Módulos que se baseiam em coisas do CSS Nível 2 começaram no Nível 3. Alguns deles já alcançaram o Nível 4 ou já estão se aproximando do Nível 5. Outros módulos que definem funcionalidades inteiramente novas, como Flexbox , ^[53] foram designados como Nível 1 e alguns deles estão se aproximando do Nível 2.

O CSS Working Group às vezes publica "Snapshots", uma coleção de módulos inteiros e partes de outros rascunhos que são considerados estáveis ​​o suficiente para serem implementados por desenvolvedores de navegadores. Até agora, cinco desses documentos de "melhores práticas atuais" foram publicados como Notas, em 2007, ^[54] 2010, ^[55] 2015, ^[56] 2017, ^[57] e 2018. ^[58]

Uma vez que esses instantâneos de especificação são principalmente destinados a desenvolvedores, tem havido uma demanda crescente por um documento de referência com versão semelhante direcionado a autores, que apresentaria o estado de implementações interoperáveis ​​conforme documentado por sites como Can I Use ... ^[59] e o Mozilla Developer Rede. ^[60] Um Grupo da Comunidade W3C foi estabelecido no início de 2020 para discutir e definir esse recurso. ^[61] O tipo real de versionamento também está em debate, o que significa que o documento uma vez produzido pode não ser chamado de "CSS4".

Suporte ao navegador

Cada navegador da web usa um mecanismo de layout para renderizar páginas da web e o suporte para a funcionalidade CSS não é consistente entre eles. Como os navegadores não analisam CSS perfeitamente, várias técnicas de codificação foram desenvolvidas para atingir navegadores específicos com soluções alternativas (comumente conhecidas como hacks CSS ou filtros CSS). A adoção de novas funcionalidades em CSS pode ser prejudicada pela falta de suporte nos principais navegadores. Por exemplo, o Internet Explorer demorou a adicionar suporte para muitos recursos CSS 3, o que retardou a adoção desses recursos e prejudicou a reputação do navegador entre os desenvolvedores. ^[62]Para garantir uma experiência consistente para seus usuários, os desenvolvedores da web costumam testar seus sites em vários sistemas operacionais, navegadores e versões de navegadores, aumentando o tempo de desenvolvimento e a complexidade. Ferramentas como o BrowserStack foram criadas para reduzir a complexidade de manutenção desses ambientes.

Além dessas ferramentas de teste, muitos sites mantêm listas de suporte de navegador para propriedades CSS específicas, incluindo CanIUse e Mozilla Developer Network . Além disso, o CSS 3 define consultas de recursos, que fornecem uma @supportsdiretiva que permite aos desenvolvedores direcionar os navegadores com suporte para determinadas funcionalidades diretamente em seus CSS. ^[63] CSS que não é suportado por navegadores mais antigos também pode às vezes ser corrigido usando polyfills JavaScript, que são partes do código JavaScript projetadas para fazer os navegadores se comportarem de maneira consistente. Essas soluções alternativas - e a necessidade de oferecer suporte à funcionalidade de fallback - podem adicionar complexidade aos projetos de desenvolvimento e, conseqüentemente, as empresas frequentemente definem uma lista de versões de navegador que irão e não irão oferecer suporte.

Como os sites adotam padrões de código mais novos que são incompatíveis com navegadores mais antigos, esses navegadores podem ser impedidos de acessar muitos dos recursos na web (às vezes intencionalmente). ^[64] Muitos dos sites mais populares na internet não são apenas visualmente degradados em navegadores mais antigos devido ao suporte insuficiente de CSS, mas não funcionam de todo, em grande parte devido à evolução do JavaScript e outras tecnologias da web.

Limitações

Algumas limitações observadas dos recursos atuais de CSS incluem:

Os seletores não podem subir

O CSS atualmente não oferece nenhuma maneira de selecionar um pai ou ancestral de um elemento que satisfaça certos critérios. ^[65] Seletores CSS de nível 4, que ainda está no status Working Draft, propõe esse seletor, ^[66] mas apenas como parte do perfil do seletor "instantâneo" completo, não o perfil "ao vivo" rápido usado no estilo CSS dinâmico. ^[67] Um esquema de seletor mais avançado (como XPath ) permitiria folhas de estilo mais sofisticadas. Os principais motivos para o Grupo de Trabalho CSS rejeitar propostas para seletores pais estão relacionados ao desempenho do navegador e a problemas de renderização incremental . ^[68]

Não é possível declarar explicitamente o novo escopo independentemente da posição

As regras de escopo para propriedades como o índice z procuram o elemento pai mais próximo com um atributo position: absolute ou position: relative. Este estranho acoplamento tem efeitos indesejáveis. Por exemplo, é impossível evitar a declaração de um novo escopo quando alguém é forçado a ajustar a posição de um elemento, impedindo-o de usar o escopo desejado de um elemento pai.

Comportamento dinâmico de pseudo-classe não controlável

CSS implementa pseudo-classes que permitem certo grau de feedback do usuário pela aplicação condicional de estilos alternativos. Uma pseudo classe CSS, " ", é dinâmica (equivalente a JavaScript "onmouseover") e tem potencial para uso indevido (por exemplo, implementando pop-ups de proximidade de cursor), ^[69] mas CSS não tem capacidade para um cliente desativá-lo (não propriedade semelhante a "desabilitar") ou limitar seus efeitos (sem valores semelhantes a "não-alterar" para cada propriedade).:hover

Não pode nomear regras

Não há como nomear uma regra CSS, o que permitiria (por exemplo) que os scripts do lado do cliente se referissem à regra, mesmo se seu seletor fosse alterado.

Não pode incluir estilos de uma regra em outra regra

Os estilos CSS geralmente devem ser duplicados em várias regras para atingir o efeito desejado, causando manutenção adicional e exigindo testes mais completos. Alguns novos recursos CSS foram propostos para resolver isso, mas foram abandonados posteriormente. ^{[70] [71]} Em vez disso, os autores podem ganhar essa habilidade usando linguagens de folha de estilo mais sofisticadas que compilam para CSS, como Sass , Less ou Stylus .

Não é possível direcionar um texto específico sem alterar a marcação

Além do pseudoelemento, não se pode direcionar intervalos específicos de texto sem a necessidade de utilizar elementos de espaço reservado.:first-letter

Questões anteriores

Além disso, vários outros problemas estavam presentes nas versões anteriores do padrão CSS, mas foram atenuados:

Limitações de controle vertical

Embora a colocação horizontal de elementos sempre tenha sido geralmente fácil de controlar, a colocação vertical era freqüentemente não intuitiva, complicada ou completamente impossível. Tarefas simples, como centralizar um elemento verticalmente ou colocar um rodapé não mais alto que a parte inferior da janela de visualização, exigiam regras de estilo complicadas e não intuitivas ou regras simples, mas amplamente sem suporte. ^[65] O Módulo de Caixa Flexível melhorou a situação consideravelmente e o controle vertical é muito mais simples e compatível com todos os navegadores modernos. ^[72] Navegadores mais antigos ainda têm esses problemas, mas a maioria deles (principalmente Internet Explorer 9 e inferior) não são mais suportados por seus fornecedores. ^[73]

Ausência de expressões

Não havia capacidade padrão para especificar valores de propriedade como expressões simples (como ). Isso seria útil em vários casos, como calcular o tamanho das colunas sujeitas a uma restrição na soma de todas as colunas. As versões 5 a 7 do Internet Explorer suportam uma instrução de expressão proprietária (), ^[74] com funcionalidade semelhante. Esta declaração proprietária expression () não é mais suportada do Internet Explorer 8 em diante, exceto nos modos de compatibilidade. Esta decisão foi tomada por "motivos de conformidade com os padrões, desempenho do navegador e segurança". ^[74] No entanto, uma recomendação candidata com um valor calc () para resolver essa limitação foi publicada pelo CSS WG ^[75]margin-left: 10% – 3em + 4px;e desde então tem suporte em todos os navegadores modernos. ^[76]

Falta de declaração de coluna

Embora possível no CSS 3 atual (usando o column-countmódulo), ^[77] layouts com colunas múltiplas podem ser complexos de implementar no CSS 2.1. Com o CSS 2.1, o processo geralmente é feito usando elementos flutuantes, que geralmente são renderizados de maneira diferente por navegadores diferentes, formatos de tela de computador diferentes e proporções de tela diferentes definidas em monitores padrão. Todos os navegadores modernos oferecem suporte a esse recurso CSS 3 de uma forma ou de outra. ^[78]

Vantagens

Separação do conteúdo da apresentação

CSS facilita a publicação de conteúdo em vários formatos de apresentação com base em parâmetros nominais. Os parâmetros nominais incluem preferências explícitas do usuário, diferentes navegadores da web, o tipo de dispositivo usado para visualizar o conteúdo (um computador desktop ou dispositivo móvel), a localização geográfica do usuário e muitas outras variáveis.

Consistência em todo o site

Quando CSS é usado efetivamente, em termos de herança e "cascata", uma folha de estilo global pode ser usada para afetar e estilizar elementos em todo o site. Se surgir a situação de que o estilo dos elementos deve ser alterado ou ajustado, essas alterações podem ser feitas editando as regras na folha de estilo global. Antes do CSS, esse tipo de manutenção era mais difícil, caro e demorado.

Largura de banda

Uma folha de estilo, interna ou externa, especifica o estilo uma vez para uma gama de elementos HTML selecionados por class, tipo ou relacionamento com outros. Isso é muito mais eficiente do que repetir informações de estilo em linha para cada ocorrência do elemento. Uma folha de estilo externa geralmente é armazenada no cache do navegador e, portanto, pode ser usada em várias páginas sem ser recarregada, reduzindo ainda mais a transferência de dados pela rede.

Reformatação de página

Com uma simples mudança de uma linha, uma folha de estilo diferente pode ser usada para a mesma página. Isso tem vantagens para a acessibilidade, além de fornecer a capacidade de personalizar uma página ou site para diferentes dispositivos de destino. Além disso, os dispositivos que não conseguem entender o estilo ainda exibem o conteúdo.

Acessibilidade

Sem CSS, os web designers normalmente devem fazer o layout de suas páginas com técnicas, como tabelas HTML, que dificultam a acessibilidade para usuários com deficiência visual (consulte Web design sem tablet # Acessibilidade ).

Normalização

Frameworks

Os frameworks CSS são bibliotecas pré-preparadas destinadas a permitir um estilo mais fácil e mais compatível com os padrões de páginas da web usando a linguagem Cascading Style Sheets. Os frameworks CSS incluem Blueprint , Bootstrap , Foundation e Materialize. Assim como as bibliotecas de linguagem de programação e script, os frameworks CSS são geralmente incorporados como planilhas .css externas referenciadas no HTML<head>. Eles fornecem uma série de opções prontas para projetar e fazer o layout da página da web. Embora muitos desses frameworks tenham sido publicados, alguns autores os usam principalmente para prototipagem rápida, ou para aprender com, e preferem 'criar' CSS apropriado para cada site publicado, sem a sobrecarga de design, manutenção e download de muitos recursos não utilizados no estilo do site. ^[79]

Metodologias de projeto

Conforme o tamanho dos recursos CSS usados ​​em um projeto aumenta, uma equipe de desenvolvimento geralmente precisa decidir sobre uma metodologia de design comum para mantê-los organizados. Os objetivos são facilidade de desenvolvimento, facilidade de colaboração durante o desenvolvimento e desempenho das folhas de estilo implementadas no navegador. Metodologias populares incluem OOCSS (CSS orientado a objeto), ACSS (CSS atômico), oCSS (folha de estilo em cascata orgânica), SMACSS (arquitetura escalável e modular para CSS) e BEM (bloco, elemento, modificador). ^[80]

Referências