Cascading Style Sheets - Cascading Style Sheets

Da Wikipédia, a enciclopédia livre
Cascading Style Sheets (CSS)
CSS-shade.svg
extensão de arquivo .css
Internet tipo de mídia text/css
Identificador de tipo uniforme (ITU) public.css
Desenvolvido por
lançamento inicial 17 de dezembro de 1996 ; Há 21 anos ( 1996/12/17 )
Tipo de formato linguagem de folhas de estilo
Padrões

Cascading Style Sheets ( CSS ) é uma linguagem de folhas de estilo usado para descrever a apresentação de um documento escrito em uma linguagem de marcação como HTML . CSS é uma tecnologia pedra angular da World Wide Web , juntamente com HTML e JavaScript .

CSS é projetado para permitir a separação de apresentação e conteúdo, incluindo o layout , cores e fontes . Esta separação pode melhorar o índice de acessibilidade , proporcionar mais flexibilidade e controle na especificação das características de apresentação, habilitar várias páginas da web para compartilhar formatação especificando o CSS relevante em um arquivo CSS separado, e reduzir a complexidade e repetição no conteúdo estrutural.

Separação de formatação e conteúdo também torna viável de apresentar a mesma página marcação em estilos diferentes para diferentes métodos de renderização, como na tela, impressa, por voz (via navegador baseado em discurso ou leitor de tela ), e em Braille com base em dispositivos tácteis. CSS também tem regras para formatação alternativo, se o conteúdo é acessado em um dispositivo móvel .

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

As especificações CSS são mantidos pelo World Wide Web Consortium (W3C). Internet tipo de mídia ( tipo MIME ) text/cssestá registrado para uso com CSS por RFC 2318 (Março de 1998). O W3C opera um livre serviço de validação CSS para documentos CSS.

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

Sintaxe

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

A 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, seletores declarar que parte da marcação de um estilo aplica-se a por tags correspondentes e atributos na própria marcação.

Seletores pode aplicar-se:

  • todos os elementos de um tipo específico, por exemplo, o segundo nível de cabeçalhos h2
  • elementos especificados pelo atributo , nomeadamente:
    • id : um identificador exclusivo no documento
    • classe : um identificador que pode anotar vários elementos em um documento
  • elementos dependendo de como eles são colocados em relação a outros na árvore do documento .

Classes e IDs são case-sensitive, comece com as letras, e pode incluir caracteres alfanuméricos, hífens e sublinhados. Uma classe pode aplicar-se 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á contido na árvore do documento. Um exemplo de um pseudo-classe largamente utilizado é , que identifica o conteúdo apenas quando os pontos “a” do utilizador o elemento visível, normalmente mantendo o cursor do rato sobre ele. Ele é ligado a um selector de como em ou . Um pseudo-classe classifica elementos de documentos, tais como ou , ao passo que um pseudo-elemento faz uma selecção que pode consistir em elementos parciais, tais como ou .:hovera:hover#elementid:hover:link:visited::first-line::first-letter

Seletores podem ser combinados de várias maneiras para alcançar grande especificidade e flexibilidade. Várias selectores podem ser unidos de uma lista espaçada para especificar elementos de 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 myClass classe que estão dentro elementos div, ao passo que se aplica a todos os elementos div que estão em elementos de myClass classe. div .myClass {color: red;}.myClass div {color: red;}

A tabela a seguir apresenta um resumo do uso indicando sintaxe seletor e a versão do CSS que introduziu.

padronizar Fósforos Primeiro definido
em nível CSS
E um elemento de tipo E 1
E:link um elemento E é a âncora de origem de uma hiperligação na qual esse objectivo ainda não é visitado (: link) ou já visitou (: visited) 1
E:active um elemento E durante certas acções do utilizador 1
E::first-line a linha primeiro formatado de um elemento E 1
E::first-letter a letra primeiro formatado de um elemento E 1
.c todos os elementos com class = "c" 1
#myid o elemento com id = "23290197myid" 1
E.warning um elemento E cuja classe é "aviso" (o idioma do documento especifica como classe é determinada) 1
E#myid um elemento E com o ID igual a "myid" 1
E F um elemento descendente F de um elemento E 1
* qualquer elemento 2
E[foo] um elemento E com um atributo "foo" 2
E[foo="bar"] um elemento E cujo "foo" valor do atributo é exatamente igual a "bar" 2
E[foo~="bar"] um elemento E cujo "foo" valor de atributo é uma lista de valores separados por espaços em branco, um dos quais é exactamente igual a "barra" 2
E[foo|="en"] um elemento E cujo atributo "foo" tem uma lista separada por hífen de valores começando (a partir da esquerda) com "br" 2
E:first-child um elemento E, primeiro filho do elemento pai 2
E:lang(fr) um elemento do tipo E em linguagem "fr" (o idioma do documento especifica como a linguagem é determinado) 2
E::before conteúdo gerado antes do conteúdo de um elemento E 2
E::after conteúdo gerado após o conteúdo de um elemento E 2
E > F um elemento filho F de um elemento E 2
E + F um elemento F imediatamente precedido por um elemento E 2
E[foo^="bar"] um elemento E cujo "foo" valor do atributo começa exatamente com o "bar" string 3
E[foo$="bar"] um elemento E cujo "foo" valor do atributo termina exatamente com o "bar" string 3
E[foo*="bar"] um elemento E cujo "foo" valor do atributo contém o substring "bar" 3
E:root um elemento E, raiz do documento 3
E:nth-child(n) um elemento E, a criança de ordem n da sua mãe 3
E:nth-last-child(n) um elemento E, a criança de ordem n da sua mãe, contando a partir do último 3
E:nth-of-type(n) um elemento E, o irmão de ordem n do seu tipo 3
E:nth-last-of-type(n) um elemento E, o irmão de ordem n do seu tipo, contando a partir do último 3
E:last-child um elemento E, último filho de seu pai 3
E:first-of-type um elemento E, primeiro irmão do seu tipo 3
E:last-of-type um elemento E, por último irmão do seu tipo 3
E:only-child um elemento E, filho único de seu pai 3
E:only-of-type um elemento E, única irmão do seu tipo 3
E:empty um elemento E que não tem filhos (incluindo os nós de texto) 3
E:target um elemento E sendo o alvo do URI referindo 3
E:enabled um elemento E interface de utilizador que está habilitado 3
E:disabled um elemento de interface de usuário E que está desativada 3
E:checked um elemento de interface de usuário E que é verificada (por exemplo, um botão de rádio ou caixa) 3
E:not(s) um elemento E que não corresponde seletor simples s 3
E ~ F um elemento F precedido por um elemento E 3

bloco de declaração

Um bloco de declaração consiste de uma lista de declarações em chaves. Cada declaração em si consiste de uma propriedade , dois pontos ( :), e um valor . Se houver várias declarações num bloco, um semi-con ( ;) tem de ser inserido para separar cada declaração.

Propriedades são especificadas no padrão CSS. Cada propriedade tem um conjunto de valores possíveis. Algumas propriedades podem afectar qualquer tipo de elemento, e outros aplicam apenas aos grupos particulares de elementos.

Os valores podem ser palavras-chave, tais como o "centro" ou "herdar", ou valores numéricos, tal como 200 px (200 pixels), 50vw (50 por cento da largura do visor) ou 80% (80 por cento da largura da janela). Os valores de cor pode ser especificado com palavras-chave (por exemplo, " vermelho "), valores hexadecimais (por exemplo, # FF0000 , também abreviado como # F00 ), os valores RGB em uma escala de 0 a 255 (por exemplo rgb(255, 0, 0)), os valores RGBA que especificam a transparência de cor e alfa ( por exemplo rgba(255, 0, 0, 0.8)), ou HSL ou HSLA valores (por exemplo hsl(000, 100%, 50%), hsla(000, 100%, 50%, 80%)).

Usar

Antes de CSS, quase todos os atributos de apresentação de documentos HTML foram contidos dentro da marcação HTML. Todas as cores de fonte, estilos de fundo, alinhamentos elemento, bordas e tamanhos teve que ser explicitamente descrito, muitas vezes, repetidamente, dentro do HTML. CSS permite que os autores se mover muito dessa informação para outro arquivo, a folha de estilo, resultando em HTML consideravelmente mais simples.

Por exemplo, títulos ( h1elementos), subtítulos ( h2), sub-sub-parágrafos ( h3), etc, são definidos estruturalmente usando HTML. Em versão impressa e na tela, escolha do tipo de letra , tamanho , cor e ênfase para estes elementos é de apresentação .

Antes de CSS, os autores de documentos que queriam atribuir tais tipográficas características para, digamos, todos os h2títulos teve que repetir marcação de apresentação HTML para cada ocorrência desse tipo de título. Isso fez com que documentos e difícil de manter propenso a erros mais complexo, maior, e muito mais. CSS permite a separação de apresentação da estrutura. CSS pode definir cor, fonte, alinhamento do texto, tamanho, bordas, espaçamento, layout e muitas outras características tipográficas, e pode fazê-lo de forma independente para na tela e visualizações impressos. CSS também define estilos não-visuais, como a velocidade de leitura e ênfase para os leitores de texto auditivas. O W3C tem agora obsoleto o uso de todos os marcação HTML de apresentação.

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

<h1><font color="red"> Chapter 1. </font></h1>

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

<h1 style="color: red;"> Chapter 1. </h1>

As vantagens deste pode não ser imediatamente claro (uma vez que a segunda forma é, na verdade, mais detalhado), mas o poder de CSS torna-se mais evidente quando as propriedades de estilo são colocadas num elemento de estilo interno ou, ainda melhor, um arquivo CSS externo. Por exemplo, suponha que o documento contém o elemento de estilo:

<style>
h1 {color: red;}
</style>

Todos os h1elementos no documento se tornará automaticamente vermelho sem necessidade de qualquer código explícito. Se o autor mais tarde queria fazer h1elementos azul em vez, isso poderia ser feito alterando o elemento de estilo para:

<style>
h1 {color: blue;}
</style>

em vez de laboriosamente atravessando o documento e mudando a cor para cada indivíduo h1elemento.

As cores também pode ser colocado em um arquivo CSS externo, tal como descrito abaixo, e carregados usando a sintaxe semelhante para:

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

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

Fontes

informações CSS pode ser fornecido de várias fontes. Estas fontes podem ser o navegador web, o usuário eo autor. A informação do autor pode ser classificada em linha, tipo de mídia, a importância, a especificidade do seletor, ordem regra, herança e definição de propriedade. informações de estilo CSS pode ser em um documento separado ou pode ser incorporado em um documento HTML. Várias folhas de estilo podem ser importados. Diferentes estilos podem ser aplicados de acordo com o dispositivo de saída a ser utilizado; por exemplo, a versão de tela pode ser bastante diferente da versão impressa, para que os autores possam adaptar a apresentação de forma adequada para cada meio.

A folha de estilo com a mais alta prioridade controla a exibição de conteúdo. Declarações não estabelecidos na maior fonte de prioridade são repassados a uma fonte de menor prioridade, tal como o estilo de agente do usuário. Este processo é chamado em cascata .

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

regime de prioridade CSS (maior para o menor)
Prioridade tipo de fonte CSS Descrição
1 Importância O ' ' anotação substitui os tipos prioritários anteriores !important
2 Na linha Um estilo aplicado a um elemento HTML via atributo 'estilo' HTML
3 Tipo de mídia A definição de propriedade se aplica a todos os tipos de mídia, a menos que um CSS específico de mídia é definida
4 Usuário definido A maioria dos navegadores têm o recurso de acessibilidade: a CSS definido pelo usuário
5 especificidade selector Um seletor contextual específico ( ) substitui definição genérica #heading p
6 ordem da regra Última declaração regra tem uma prioridade mais alta
7 herança pai Se uma propriedade não for especificado, ele é herdado de um elemento pai
8 definição de propriedade CSS no documento HTML regra CSS ou estilo CSS inline substitui um valor navegador padrão
9 padrão do navegador A prioridade mais baixa: o valor padrão do navegador é determinado pelas especificações de valor inicial do W3C

especificidade

Especificidade refere-se os pesos relativos de várias regras. Ele determina quais estilos se aplicam a um elemento quando mais de uma regra poderia aplicar. Com base na especificação, um selector simples (por exemplo H1) tem uma especificidade de 1, selectores de classe tem uma especificidade de 1,0, e selectores ID especificidade de 1,0,0. Como os valores de especificidade não transitar como no sistema decimal, vírgulas são usadas para separar os "dígitos" (uma regra CSS com 11 elementos e 11 classes teria uma especificidade de 11,11, e não 121).

Assim, as seguintes regras seletores resultar na especificidade indicada:

seletores especificidade
H1 {color: white;} 0, 0, 0, 1
P EM {color: green;} 0, 0, 0, 2
.grape {color: red;} 0, 0, 1, 0
P.bright {color: blue;} 0, 0, 1, 1
P.bright EM.dark {color: yellow;} 0, 0, 2, 2
#id218 {color: brown;} 0, 1, 0, 0
style=" " 1, 0, 0, 0

Exemplo

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;"> To demonstrate specificity </p>
  </body>
</html>

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

Herança

A herança é uma característica chave em CSS; ele depende da relação ancestral-descendente para operar. A herança é o mecanismo pelo qual as propriedades são aplicados não só para um elemento especificado, mas também para os seus descendentes. Herança conta com a árvore de documentos, que é a hierarquia de XHTML elementos em uma página com base no assentamento. Elementos descendentes para herdar a propriedade valores CSS de qualquer elemento ancestral colocando-os. Em geral, os elementos descendentes herdam propriedades relacionadas com o texto, mas são propriedades relacionadas ao caixa não são herdadas. As propriedades que podem ser hereditárias são a cor, tipo de letra, letter-spacing, line-height, list-style, text-align, text-indent, text-transform, visibilidade, white-space e word-spacing. Propriedades que não podem ser herdadas são fundo, fronteira, visor, flutuador e claro, a altura e a largura, a margem, min- e max-altura e -width, contorno, transbordamento, preenchimento, posição, texto-decoração, vertical-align ez -índice.

A herança pode ser utilizado para evitar que declara certas propriedades repetidas vezes numa folha de estilo, permitindo mais curto CSS.

Herança em CSS não é o mesmo que a herança em linguagens de programação baseadas em classes , onde é possível definir classe B como "como classe A, mas com modificações". Com CSS, é possível ao estilo de um elemento com "classe A, mas com modificações". No entanto, não é possível definir uma CSS classe B assim, que poderia então ser usado para denominar vários elementos sem ter que repetir as modificações.

Exemplo

Dado o seguinte folha de estilo:

h1 {
   color: pink;
}

Suponha que há um elemento h1 com um elemento enfatizando (em) dentro:

<h1>
   This is to <em>illustrate</em> inheritance
</h1>

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

whitespace

Espaço entre propriedades e selectores é ignorado. Este trecho de código:

body{overflow:hidden;background:#000000;background-image:url(images/bg.gif);background-repeat:no-repeat;background-position:left top;}

é funcionalmente equivalente a esta:

body {
   overflow: hidden;
   background: #000000;
   background-image: url(images/bg.gif);
   background-repeat: no-repeat;
   background-position: left top;
}

Uma maneira comum de formatar CSS para facilitar a leitura é para recuar cada propriedade e dar-lhe sua própria linha. Além de formatação CSS para facilitar a leitura, você pode usar as propriedades de taquigrafia para escrever o código mais rápido que também é processado mais rapidamente quando está sendo processado, assim:

body {
   overflow: hidden;
   background: #000 url(images/bg.gif) no-repeat left top;
}

posicionamento

CSS 2.1 define três esquemas de posicionamento:

fluxo normal
Inline itens são dispostos da mesma maneira como as letras em palavras no texto, um após o outro em todo o espaço disponível até que não haja mais espaço, em seguida, iniciar uma nova linha abaixo. Bloco itens empilhar verticalmente, como parágrafos e como os itens em uma lista com marcadores. Fluxo normal também inclui o posicionamento relativo de bloco ou em linha itens, e caixas de run-in.
flutuadores
Um item flutuava é retirado do fluxo normal e deslocado para a esquerda ou para a direita, tanto quanto possível no espaço disponível. Outros conteúdos, então, flui ao lado do item flutuou.
posicionamento absoluto
Um item posicionado absolutamente não tem lugar em, e nenhum efeito sobre o fluxo normal de outros itens. Ele ocupa a sua posição atribuída em seu recipiente de forma independente de outros itens.

propriedade de posição

Há quatro possíveis valores da 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 posições.

Estático
O valor padrão coloca o item no fluxo normal
Relativo
O artigo é colocado no fluxo normal , e, em seguida, deslocada ou deslocamento a partir dessa posição. Itens do fluxo subseqüentes são definidos como se o item não tinha sido movido.
Absoluto
Especifica o posicionamento absoluto . O elemento é posicionado em relação ao seu antepassado mais próxima não estático.
Fixo
O item é absolutamente posicionado em uma posição fixa na tela, mesmo que o resto do documento é rolada

Float e clara

A floatpropriedade pode ter um dos três valores. Absolutamente posicionado ou fixos itens não pode ser transferido. Outros elementos normalmente fluem itens redor flutuavam, a menos que sejam impedidos do fazer por sua clearpropriedade.

esquerda
O item flutua à esquerda da linha que teria aparecido em; outros itens pode fluir em torno do seu lado direito.
certo
O item flutua à direita da linha que teria aparecido em; outros itens pode fluir em torno do seu lado esquerdo.
Claro
Força o elemento a aparecer por baixo ( 'clear') elementos para a esquerda (flutuava ), direito ( ) ou ambos os lados ( ).clear:leftclear:rightclear:both

História

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

CSS foi proposta pela primeira vez por Håkon Wium Lie em 10 de outubro de 1994. Na época, Lie estava trabalhando com Tim Berners-Lee no CERN . Vários outros linguagem de folhas de estilo para a web foram propostas em torno do mesmo tempo, e discussões sobre as listas de discussão pública e dentro World Wide Web Consortium resultou na primeira Recomendação W3C CSS (CSS1) a ser lançado em 1996. Em particular, uma proposta por Bert Bos foi influente; ele se tornou co-autor de CSS1, e é considerado como co-criador do CSS.

As folhas de estilo ter existido de uma forma ou de outra, desde os primórdios da Standard Generalized Markup Language ( SGML ) na década de 1980, e CSS foi desenvolvido para fornecer folhas de estilo para a web. Um dos requisitos para uma linguagem de folha de estilo web foi para folhas de estilo para vir de diferentes fontes na web. Portanto, linguagem de folhas de estilo existentes como DSSSL e FOSI não eram adequadas. CSS, por outro lado, deixar o estilo de um documento ser influenciada por várias folhas de estilo por meio de "cascata" estilos.

Como HTML cresceu, passou a abranger uma ampla variedade de capacidades estilísticas para atender às demandas dos desenvolvedores web . Esta evolução deu o designer mais controle sobre a aparência do site, ao custo de HTML mais complexa. Variações no navegador web implementações, como ViolaWWW e WorldWideWeb , fez aparência do site consistente difícil, e os usuários tinham menos controle sobre como o conteúdo web foi exibido. O browser / editor desenvolvido por Tim Berners-Lee tinha folhas de estilo que foram codificados no programa. As folhas de estilo não podiam ser ligados aos documentos na web. Robert Cailliau , também do CERN, queria separar a estrutura da apresentação para que as folhas de estilo diferentes poderia descrever apresentação diferente para impressão, apresentações baseados em tela, e os editores.

Melhorar as capacidades de apresentação na Web foi um tema de interesse para muitos na comunidade web e nove idiomas diferentes folhas de estilo foram propostos na lista de discussão de estilo www. Destes nove propostas, dois foram especialmente influente no que se tornou CSS: Cascading Style Sheets HTML e base-Stream Proposta Style Sheet (SSP). Dois navegadores serviu como bancos de ensaio para as propostas iniciais; Lie trabalhou com Yves Lafon para implementar CSS em Dave Raggett 's Arena browser. Bert Bos implementado sua própria proposta SSP no Argo browser. Em seguida, encontra-se Bos e trabalhou em conjunto para desenvolver o padrão CSS (o 'H' foi removido a partir do nome, porque estas folhas de estilo podem também ser aplicados a outras linguagens de marcação para além de HTML).

A proposta de Lie foi apresentado no " Mosaic ea Web " conferência (mais tarde chamado www2) em Chicago, Illinois, em 1994, e novamente com Bert Bos em 1995. Por esta altura o W3C já estava sendo estabelecida, e tomou um interesse no desenvolvimento de CSS. Ele organizou um workshop para esse fim presidido por Steven Pemberton . Isto resultou em W3C acrescentando trabalho de CSS às entregas do conselho de revisão editorial HTML (ERB). Mentir e Bos eram do pessoal técnico principal sobre este aspecto do projeto, com os membros adicionais, incluindo Thomas Reardon da Microsoft, participando também. Em agosto de 1996, Netscape Communication Corporation apresentou uma linguagem de folha de estilo alternativa chamada JavaScript Style Sheets (JSSS). A especificação nunca foi terminado, e é obsoleto. Até o final de 1996, CSS estava pronto para se tornar oficial, ea Recomendação CSS nível 1 foi publicado em dezembro.

Desenvolvimento de HTML, CSS, eo DOM tudo tinha sido lugar levando-se em um grupo, a revisão Editorial Board HTML (ERB). No início de 1997, a ERB foi dividido em três grupos de trabalho: Grupo de Trabalho HTML , presidido por Dan Connolly do W3C; DOM grupo de trabalho, presidiu por Lauren madeira de SoftQuad ; e grupo CSS Trabalho , presidido por Chris Lilley da W3C.

O Grupo de Trabalho CSS começou abordando questões que não tinham sido abordados com CSS nível 1, resultando na criação de CSS nível 2 em 4 de novembro de 1997. Foi publicado como uma recomendação W3C em 12 de maio de 1998. CSS nível 3, que era começou em 1998, ainda está em desenvolvimento a partir de 2014.

Em 2005, os Grupos de Trabalho CSS decidiu reforçar os requisitos para os padrões mais rigorosamente. Isso significava que já publicou padrões como o CSS 2.1, CSS 3 Seletores e CSS 3 Text foram puxados para trás de Recomendação Candidate para Draft nível de Trabalho.

Dificuldade com a adoção

A especificação CSS 1 foi concluída em 1996. do Microsoft Internet Explorer 3 foi lançado no mesmo ano, com alguns suporte limitado para CSS. IE 4 e Netscape 4.x adicionado mais apoio, mas foi tipicamente incompleta e teve muitos erros que impediram CSS seja útil adotado. Era mais do que três anos antes de qualquer navegador web alcançado quase completa implementação da especificação. Internet Explorer 5.0 para o Macintosh , enviado em Março de 2000, foi o primeiro navegador a ter o apoio total (mais de 99 por cento) CSS 1, superando Opera , que tinha sido o líder desde a sua introdução do suporte CSS 15 meses antes. Outros navegadores seguido logo depois, e muitos deles adicionalmente implementado partes do CSS 2.

No entanto, mesmo quando mais tarde 'versão 5' navegadores começaram a oferecer uma implementação bastante completo de CSS, eles ainda estão incorretos em determinadas áreas e foram repleto de inconsistências, erros e outras peculiaridades . Microsoft Internet Explorer 5.x para Windows , ao contrário do muito diferente IE para Macintosh , tinha uma implementação seriamente errada do ' modelo de caixa CSS ', em comparação com os padrões CSS. Este é um conjunto de regras que especificam certos aspectos do dimensionamento e layout dos componentes de uma página web. Tais inconsistências e variação no suporte de recursos tornou difícil para os designers para conseguir uma aparência consistente entre os navegadores e plataformas sem o uso de soluções denominado CSS hacks e filtros . Os IE / Windows erros modelo caixa eram tão graves que, quando Internet Explorer 6 foi lançado, a Microsoft introduziu um modo compatível com versões anteriores de interpretação CSS ( ' modo quirks ') mais uma alternativa, corrigido 'modo de padrões'. Outros navegadores não-Microsoft também forneceu esta mesma 'capacidade comportamento mode'-switch. Infelizmente, desde o lançamento do IE 6, em 2001, tornou-se necessário para os autores de páginas da web html arquivos para certificar-se de que o html contém um especial distintivas 'compatível com padrões CSS destina' marcador para mostrar que os autores pretendem CSS para ser interpretados corretamente, em conformidade com as normas, em vez de ser destinado ao agora de longo obsoleto navegador IE5 / Windows . Sem este marcador, navegadores web que têm os 'caprichos mode' de comutação de capacidade vai objetos de tamanho em páginas da web como IE5 / Windows iria ao invés de seguir os padrões CSS.

Problemas com a adoção irregular navegadores de CSS, juntamente com errata na especificação original, levou o W3C para revisar o padrão CSS 2 em CSS 2.1, que se aproximou para um instantâneo de trabalho de suporte CSS atual em navegadores HTML. Alguns CSS 2 propriedades que implementaram nenhum navegador com sucesso foram retiradas, e em alguns casos, comportamentos definidos foram alteradas para trazer o padrão em linha com as implementações predominantes existentes. CSS 2.1 tornou-se uma Recomendação Candidate em 25 de fevereiro de 2004, mas CSS 2.1 foi puxado de volta para Working Draft de estado em 13 de junho de 2005, e só voltou ao status Candidate Recommendation on 19 de julho de 2007.

Além desses problemas, a .cssextensão foi usado por um produto de software usado para converter PowerPoint arquivos em compactos Slide Show arquivos, assim que alguns servidores web servido todos .csscomo tipo mime application/x-pointplus em vez de text/css.

variações

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

CSS 1

A primeira especificação CSS para tornar-se uma Recomendação W3C oficial é CSS nível 1, publicado em 17 de dezembro de 1996. Håkon Wium Lie e Bert Bos são creditados como os criadores originais. Entre seus recursos estão o suporte para

  • Fonte propriedades, tais como tipo de letra e ênfase
  • Cor do texto, fundos, e outros elementos
  • atributos de texto como o espaçamento entre as palavras, letras e linhas de texto
  • Alinhamento de texto, imagens, tabelas e outros elementos
  • Margem, fronteira, preenchimento, e para a maioria dos elementos de posicionamento
  • identificação única e classificação genérica de grupos de atributos

O W3C não mantém a recomendação do CSS 1.

CSS 2

CSS nível especificação 2 foi desenvolvido pelo W3C e publicado como uma recomendação em Maio de 1998. Um super conjunto de CSS 1, CSS 2 inclui um número de novas capacidades como o posicionamento absoluto, em relação, e fixo de elementos e de índice z , o conceito de tipos de mídia, suporte para folhas aural estilo (que mais tarde foram substituídos pelos módulos de fala CSS 3) e texto bidirecional e novas propriedades de fonte, como sombras.

O W3C não mantém a recomendação CSS 2.

CSS 2.1

CSS nível 2 revisão 1, muitas vezes referida como "CSS 2.1", corrige erros em CSS 2, remove mal suportado ou não recursos totalmente interoperáveis e adiciona já implementado extensões do navegador com a especificação. Para cumprir com o Processo de W3C para padronizar as especificações técnicas, CSS 2.1 ia e voltava entre Working Draft de status e status Candidate Recommendation por muitos anos. CSS 2.1 se tornou uma Recomendação Candidate em 25 de fevereiro de 2004, mas foi revertido para um Projeto de Trabalho em 13 de Junho de 2005, para uma análise mais aprofundada. Ele voltou a Recomendação Candidate em 19 de Julho de 2007 e, em seguida, atualizado duas vezes em 2009. No entanto, porque as mudanças e esclarecimentos foram feitos, ele novamente voltou a Última Projecto Chamada de Trabalho em 7 de Dezembro de 2010.

CSS 2.1 foi a recomendação proposta em 12 de Abril de 2011. Depois de ser revistos pelo Comité Consultivo do W3C, foi finalmente publicado como uma recomendação W3C em 7 de Junho de 2011.

CSS 2.1 foi planejado como o primeiro e último revisão do nível de 2 mas baixa trabalho prioritário em CSS 2.2 começou em 2015.

CSS 3

Taxonomia e status do CSS3 módulos .      Recomendação      Candidato Recomendação      Última chamada      Working Draft.

Ao contrário CSS 2, que é uma grande especificação única definição de vários recursos, CSS 3 é dividido em vários documentos separados chamados "módulos". Cada módulo adiciona novas capacidades ou estende os recursos definidos no CSS 2, preservando a compatibilidade inversa. Trabalho em CSS nível 3 começou por volta do momento da publicação do original recomendação CSS 2. Os primeiros CSS 3 esboços foram publicados em Junho de 1999.

Devido à modularização, módulos diferentes têm estabilidade e status diferente.

Alguns módulos têm Candidato Recomendação ( CR estado) e são considerados moderadamente estável. No CR palco, implementações são aconselhados a deixar cair prefixos de fornecedores.

Resumo das principais module-Especificações
Módulo especificação título estado Encontro
css3-fundo CSS Fundos e Módulo Fronteiras Nível 3  Candidato Rec. outubro 2017
css3-box modelo de caixa básica CSS Trabalhando Projecto , julho 2018
css-cascata-3 CSS Cascading e Herança Nível 3  Candidato Rec. Maio 2016
css3-color CSS Módulo Cor Nível 3 Recomendação junho 2018
css3-content CSS3 Gerado e substituído Módulo de Conteúdo  trabalhando Projecto junho 2016
css-fonts-3 CSS Fontes Módulo Nível 3 Candidato Rec. junho 2018
css3-gcpm CSS Conteúdo Gerado por paginada Media Module trabalhando Projecto Maio de 2014
css3-disposição CSS Template módulo de layout Nota março 2015
css3-mediaqueries  Consultas de mídia Recomendação junho 2012
mediaqueries-4  Consultas de mídia Nível 4 Candidato Rec. setembro 2017
css3-multicol  Multi-coluna nível do módulo Esquema 1 trabalhando Projecto maio de 2018
css3 páginas CSS paginada Media Module Nível 3 trabalhando Projecto março 2013
selectores-3 Seletores de nível 3 Candidato Rec. janeiro 2018
selectores-4 Nível seletores 4 trabalhando Projecto fev 2018
css3-ui CSS Básico User Interface Module Nível 3 (CSS3 UI) Recomendação junho 2018

CSS 4

Não existe uma única especificação, integrada CSS4, porque ele é dividido em módulos separados "nível 4".

Porque CSS3 dividir a definição da linguagem CSS em módulos, os módulos foram autorizados a nível independente. A maioria dos módulos são de nível 3 que construir sobre as coisas do CSS 2.1. Existem alguns nível-4 módulos (tal como valores de imagem, Fundos & beiras, ou selectores), que se apoiam sobre a funcionalidade de um módulo anterior de nel-3. Outros módulos que definem completamente a nova funcionalidade, tais como Flexbox , foram designados como "nível 1".

O Grupo de Trabalho CSS às vezes publica "Snapshots", uma coleção de módulos inteiros e partes de outros rascunhos que são considerados estáveis, interoperably implementado e, portanto, pronto para uso. Até agora, quatro dessas "melhores práticas correntes" documentos foram publicados como Notas, em 2007, 2010, 2015, e 2017.

suporte ao navegador

Cada navegador utiliza um mecanismo de layout para renderizar páginas web e suporte para a funcionalidade CSS não é consistente entre eles. Porque os navegadores não analisar CSS perfeitamente, várias técnicas de codificação foram desenvolvidos para atingir navegadores específicos com soluções alternativas (vulgarmente conhecido como hacks CSS ou filtros CSS). Adoção de novas funcionalidades do CSS pode ser prejudicada pela falta de apoio nos principais navegadores. Por exemplo, o Internet Explorer era lento para adicionar suporte para muitos recursos CSS 3, o que atrasou a adoção desses recursos e prejudicou a reputação do navegador entre os desenvolvedores. A fim de garantir uma experiência consistente para os seus usuários, desenvolvedores web muitas vezes testar seus sites em vários sistemas operacionais, navegadores e versões do navegador, aumentando o tempo de desenvolvimento e complexidade. Ferramentas como BrowserStack foram construídos para reduzir a complexidade de manter estes ambientes.

Além destas ferramentas de teste, muitos sites mantêm listas de suporte do navegador para propriedades CSS específicas, incluindo CanIUse eo Mozilla Developer Network . Além disso, os CSS 3 define apresentam consultas, que fornecem uma @supportsdirectiva que permitirá que desenvolvedores para direcionar os navegadores com suporte para determinadas funcionalidades diretamente dentro de seu CSS. CSS que não é suportado pelos navegadores mais velhos às vezes também pode ser corrigido em usar Javascript polyfills , que são pedaços de código Javascript concebido para tornar os navegadores se comportam de forma consistente. Estas soluções-e a necessidade de apoiar fallback funcionalidade pode adicionar complexidade aos projetos de desenvolvimento e, consequentemente, as empresas frequentemente definir uma lista de versões do navegador que vai e não vai suportar.

Como sites de adotar padrões de código mais recentes que são incompatíveis com os navegadores mais antigos, estes navegadores pode ser cortado de acessar muitos dos recursos na web (por vezes intencionalmente). Muitos dos sites mais populares da internet não são apenas visualmente degradada em navegadores mais antigos, devido ao apoio CSS pobres, mas não funcionam em tudo, em grande parte devido à evolução do Javascript e outras tecnologias web.

limitações

Algumas limitações observadas das capacidades atuais de CSS incluem:

Seletores são incapazes de subir
CSS oferece atualmente nenhuma maneira de selecionar um pai ou antepassado de um elemento que satisfaça determinados critérios. CSS Seletores Nível 4, que ainda está em funcionamento Projecto status, propõe um tal selector, mas apenas como parte do perfil selector "completa", não o perfil "rápida" usados em estilo CSS dinâmico. Um esquema selector mais avançada (como XPath ) permitiria folhas de estilo mais sofisticados. As principais razões para o Grupo de Trabalho CSS rejeitar previamente propostas para seletores pais estão relacionados com o desempenho do navegador e renderização incrementais questões.
não pode declarar explicitamente novo escopo independentemente da posição
Delimitação do âmbito regras para propriedades tais como índice z olhar para o elemento pai mais próximo com uma das posições: atributo relativa: absoluta ou a posição. Este acoplamento estranho tem efeitos indesejáveis. Por exemplo, é impossível evitar declarar um novo escopo quando um é forçado a ajustar a posição de um elemento, evitando um de usar o âmbito desejado de um elemento pai.
Pseudo-classe comportamento dinâmico não controláveis
CSS implementa pseudo-classes que permitem um grau de feedback do usuário pela aplicação condicional de estilos alternativos. Uma CSS pseudo-classe " ", é dinâmica (equivalente a JavaScript "onmouseover") e tem potencial para abuso (por exemplo, a implementação de popups cursor-de proximidade), mas CSS não tem capacidade para um cliente para desativá-lo (não "desativar" propriedade -como) ou limitar os seus efeitos (não "NoChange" valores -como para cada propriedade).:hover
não pode nomear regras
Não há nenhuma maneira para citar uma regra CSS, o que permitiria que (por exemplo) scripts do lado do cliente para se referir à regra, mesmo se suas mudanças de selecção.
não pode incluir estilos de uma regra em outra regra
Os estilos CSS muitas vezes deve ser repetido em várias regras para conseguir um efeito desejado, fazendo com que a manutenção adicional e exigem o teste mais completo. Foram propostas algumas novas funcionalidades CSS para resolver isso, mas (a partir de fevereiro de 2016) ainda não estão implementadas em qualquer lugar.
não pode ter como alvo um texto específico sem alterar marcação
Além do pseudo-elemento, não se pode atingir intervalos específicos de texto sem a necessidade de utilizar elementos de espaço reservado.:first-letter

problemas antigos

Além disso, várias outras questões estiveram presentes em versões anteriores do padrão CSS, mas foram aliviado:

as limitações de controle verticais
Embora a colocação horizontal de elementos sempre foi geralmente fácil de controlar, posicionamento vertical era frequentemente intuitiva, complicado, ou completamente impossível. Tarefas simples, como a centralização de um elemento vertical ou colocar um rodapé não superior a parte inferior da janela necessário, quer as regras de estilo complicados e unintuitive, ou regras simples, mas amplamente não suportados. O Box módulo flexível melhorado a situação consideravelmente e controle vertical é muito mais simples e apoiado em todos os navegadores modernos. navegadores mais antigos ainda têm essas questões, mas a maioria das pessoas (principalmente Internet Explorer 9 e abaixo) não são mais suportados pelos seus fornecedores.
Ausência de expressões
Não houve capacidade padrão para especificar valores de propriedade como expressões simples (como ). Isso seria útil em uma variedade de casos, como calcular o tamanho das colunas sujeitas a uma restrição na soma de todas as colunas. Internet Explorer versões 5 a 7 suporte uma declaração expressão proprietário (), com funcionalidade semelhante. Esta declaração proprietária expressão () não é mais suportada do Internet Explorer 8 em diante, exceto nos modos de compatibilidade. Esta decisão foi tomada para "cumprimento de normas, o desempenho do navegador, e razões de segurança". No entanto, uma recomendação candidato com um valor calc () para resolver esta limitação foi publicado pela CSS WG e desde então tem sido apoiado em todos os navegadores modernos.margin-left: 10% 3em + 4px;
Falta de declaração de coluna
Embora possível em CSS corrente 3 (utilizando o column-countmódulo), layouts com múltiplas colunas pode ser complexo de implementar em CSS 2.1. Com CSS 2.1, o processo muitas vezes é feito uso de elementos flutuantes, que muitas vezes são prestados de forma diferente por diferentes navegadores, formas de tela de computador diferentes, e rácios de tela diferentes definidos em monitores convencionais. Todos os navegadores modernos suportam esta funcionalidade CSS 3, de uma forma ou de outra.

vantagens

Separação de 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. parâmetros nominais incluem preferências do usuário explícitos, diferentes navegadores web, o tipo de dispositivo que está sendo usado para visualizar o conteúdo (um computador desktop ou dispositivo de Internet móvel), a localização geográfica do usuário e muitas outras variáveis.
consistência em todo o site
Quando CSS é utilizada de forma eficaz, em termos de herança e "em cascata", uma folha de estilo global pode ser usado para afetar e elementos de estilo de site de largura. Se a situação que o estilo dos elementos deve ser alterada ou modificada, essas mudanças podem ser feitas editando regras na folha de estilo global. Antes de CSS, este tipo de manutenção foi mais difícil, caro e demorado.
Bandwidth
Uma folha de estilo, interna ou externa, especifica o estilo de uma vez para uma gama de elementos HTML seleccionados por class, tipo ou relação aos outros. Isso é muito mais eficiente do que a repetição de informações sobre estilos inline para cada ocorrência do elemento. Uma folha de estilo externa é normalmente armazenado no cache do navegador , e pode, portanto, ser usado em várias páginas sem ser recarregado, reduzindo ainda mais a transferência de dados através de uma rede.
reformatação página
Com uma simples mudança de uma linha, uma folha de estilo diferente pode ser usado para a mesma página. Isto tem vantagens de acessibilidade, bem como proporcionar a capacidade de adaptar uma página ou site para dispositivos diferentes do alvo. Além disso, os dispositivos não são capazes de compreender o estilo ainda exibir o conteúdo.
Acessibilidade
Sem CSS, web designers devem normalmente colocar para fora suas páginas com técnicas como tabelas HTML que dificultam a acessibilidade para usuários com deficiência visual (ver tableless # acessibilidade ).

estandardização

Frameworks

Quadros CSS são pré-preparados bibliotecas que se destinam a permitir a fácil mais, compatível com os padrões de estilo de páginas da web usando a linguagem de folhas de estilo em cascata. Quadros CSS incluem Foundation , Blueprint , Bootstrap , Cascade Framework e se materializar. Como bibliotecas de programação e linguagem de script, quadros CSS são geralmente incorporados como folhas .css externos referenciados no HTML . Eles fornecem um número de opções prontas para a concepção e layout da página web. Embora muitos destes quadros foram publicados, alguns autores utilizá-los principalmente para prototipagem rápida, ou para aprender a partir de, e preferem CSS 'artesanato' que é apropriado para cada site publicado sem o design, manutenção e descarga sobrecarga de ter muitos recursos não utilizados no estilo do site.<head>

metodologias de projeto

Como o tamanho de recursos CSS usado em um projeto aumenta, uma equipe de desenvolvimento muitas vezes precisa para decidir sobre uma metodologia de projeto comum para mantê-los organizados. Os objetivos são a facilidade de desenvolvimento, facilidade de colaboração durante o desenvolvimento e desempenho das folhas de estilo implantados no navegador. metodologias populares incluem OOCSS - orientada a objeto CSS, ACSS - CSS atômica, OCSs - Ficha Cascade Estilo orgânica, SMACSS - arquitetura escalável e modular para CSS, e BEM - bloco, elemento, modificador.

Referências

Outras leituras

links externos