CSS3 vs CSS - Cascading Style Sheets ou CSS é um elemento-chave do design da web. Como desenvolvedor ou designer da web, você precisa ter um profundo entendimento do CSS, especialmente a diferença entre CSS3 e CSS.

Você pode ter ouvido ou encontrado o termo CSS3 se leu sobre desenvolvimento ou design da web. Se você já pensou em qual poderia ser a diferença entre CSS3 e CSS, é aqui que todas as suas dúvidas serão colocadas: ambas são iguais.

É isso mesmo: CSS3 x CSS são tão diferentes um do outro quanto HTML e HTML5. CSS3 é simplesmente a mais recente iteração de CSS. As pessoas que falam sobre codificação de CSS agora estão na verdade apenas se referindo a CSS3.

Tanto o HTML5 quanto o CSS3 geralmente se tornaram chavões, com significados além das tecnologias atuais. Eles simbolizam a adesão a certos padrões essenciais no desenvolvimento da Web, em vez de usar software proprietário. Na maioria das vezes, o hype em torno dessas chavões já diminuiu. A maioria das empresas, mesmo as que juram manter tudo internamente, concorda que seguir esses padrões básicos facilita muito a vida de todos.

Agora, já faz um bom tempo que o CSS3 foi lançado e aceito por todos. Ele trouxe muitas coisas excelentes para o setor e marcou um grande avanço no desenvolvimento da web em geral. A versão anterior, CSS2, foi lançada em 1998. Isso foi há quase 20 anos. A única revisão que recebeu após o lançamento foi em 2011, chamada CSS2.1. Mesmo com a revisão, a maioria dos especialistas já começou a dizer que o CSS3 é inevitável. O CSS3 veio com vários recursos e capacidades que se tornaram inteiramente necessários até então.

O que você talvez não saiba sobre o CSS3 é que ele começou a ser desenvolvido apenas um ano após o envio da versão anterior. Isso significa que o W3C estava trabalhando na versão aprimorada desde 1999. Levou mais de 12 anos para lançar a primeira versão estável do CSS3.

Existem enormes diferenças entre CSS3 e CSS (que chegaremos em breve). Mas o fato é que os navegadores da web já estavam prontos para as adições ao CSS3 no momento em que foram lançados. Como resultado, eles se adaptaram rapidamente ao novo lançamento. Todos os principais navegadores da web agora suportam CSS3, até o Internet Explorer!

Obviamente, o W3C ainda continua desenvolvendo CSS3 e HTML5, portanto, uma versão final é improvável. Para ser justo, uma versão final também não é uma necessidade no momento, dada a rapidez com que a Internet está progredindo. Com os requisitos da Web e o próprio setor crescendo e mudando tão rapidamente, a codificação precisa avançar tão rapidamente, se não mais.

CSS3 vs Infografia CSS

Diferenças entre CSS3 e CSS definidas

Agora que você sabe um pouco sobre o plano de fundo por trás do CSS3, vamos dar uma olhada no que mudou. Talvez a maior diferença entre CSS3 e a versão anterior substituída seja a separação do módulo. No CSS2, tudo era uma única especificação grande que definia diferentes recursos. No entanto, o CSS3 mudou isso trazendo vários documentos chamados módulos. Cada módulo possui seus próprios recursos novos que não afetam a compatibilidade da versão CSS estável anterior.

Consultas de mídia

Existem muitos módulos disponíveis, mas apenas quatro são publicados como recomendações formais pelo W3C. Esses quatro grandes módulos são os seguintes:

  1. Color, publicado em 2011
  2. Seletores de nível 3, publicados em 2011
  3. Namespaces, publicado 201
  4. Consultas de mídia, publicadas em 2012

Entre esses, o módulo mais importante são as consultas de mídia. De fato, este módulo poderia ser a adição mais importante que o CSS3 trouxe ao CSS em geral. As consultas de mídia são bastante simples: permite a aplicação de determinadas condições a diferentes folhas de estilo. Isso permite que os sites sejam fluidos ou respondam a diferentes tamanhos de tela. Em outras palavras, os sites podem ajustar suas dimensões e elementos para se ajustarem a diferentes dispositivos. Hoje, o design responsivo da web é provavelmente a maior palavra da moda. Dado que a maioria do uso da Internet está agora em dispositivos móveis, o design responsivo é absolutamente essencial e as consultas da mídia ajudam a conseguir isso. O módulo também permite que os desenvolvedores adaptem os sites a várias resoluções sem alterar ou remover o conteúdo.

As consultas de mídia também são muito fáceis de descobrir e adicionar. Depois de usá-los algumas vezes, você pode descobrir o resto. Aqui estão alguns exemplos de linhas de código:

@media screen e (largura máxima: 600 px) (

fundo: #FFF;

)

Parece bastante simples, não é? Com essas duas linhas de código, você pode ativar o estilo de telas com no máximo 600 pixels de largura. Isso significa que todas as telas com uma largura máxima de 600 pixels mostrarão um fundo branco. A largura máxima é apenas uma das várias condições que você pode aplicar a uma folha de estilos no CSS3. Outro é a largura máxima do dispositivo. Esta é a resolução da tela e não a área de visualização. Além disso, um valor mínimo pode ser indicado em vez de máximo; basta usar 'min' em vez de 'max'. Você também pode combinar os dois, como abaixo:

@media screen e (largura mínima: 600 px) e (largura máxima: 900 px) (

fundo: #FFF;

)

Aqui, o estilo se aplica apenas a telas com uma largura de visualização de 600 a 900 pixels. O CSS3 vem com algumas folhas de estilo predefinidas para dispositivos móveis populares, como o iPad e o iPhone da Apple. Aqui estão alguns deles:

Já deve estar bem claro o quão importante são as consultas de mídia. Este módulo é muito útil para desenvolvedores que desejam criar web design responsivo com a menor quantidade possível de codificação.

Bordas arredondadas

O CSS3 também vem com algumas considerações realmente importantes sobre o design da web. Por exemplo, as bordas podem ser arredondadas sem hacks, com o CSS3 introduzindo bordas arredondadas. Essa foi uma grande vantagem para desenvolvedores e designers da web que estavam lutando com as fronteiras CSS antes. Não é de surpreender que alguns desses recursos ainda não funcionem nas versões antigas do Internet Explorer. O único código adicional que você precisa adicionar à classe específica na folha de estilos é, por exemplo:

-moz-border-raio: 5px;

-webkit-border-radius: 5px;

borda: sólido 2px # 897048;

Assim, o CSS3 facilita muito a vida do desenvolvedor e designer da web. O lançamento também veio com gradientes, surpreendentemente indisponíveis em lançamentos anteriores.

Cursos recomendados

  • Treinamento on-line sobre serviços da Web em Java
  • Desenvolvimento profissional de jogos em treinamento em C ++
  • Programa de Hacking Ético
  • Pacote de treinamento Vegas Pro 13

Imagens de borda, sombras de texto

Outros elementos que foram adicionados ao CSS3, mas ausentes nas versões anteriores, incluem imagens de borda e sombras de caixa / texto. O CSS3 tornou as coisas muito mais simples, eliminando a necessidade de adicionar hacks para qualquer um dos elementos de estilo comuns acima. Por exemplo, aqui está a linha solitária de código a ser adicionada para sombras de texto:

sombra de texto: 2px 2px 2px # ddccb5;

Colunas

CSS3 também simplificou como adicionar colunas ao conteúdo. Tudo o que você precisa fazer agora é adicionar quatro linhas de código:

  1. contagem de colunas
  2. largura da coluna
  3. gap da coluna
  4. regra da coluna

Vários fundos

A versão mais recente do CSS também adicionou a capacidade de inserir diretamente vários fundos do CSS, em vez de usar hacks indiretos como antes. O código é incrivelmente simples de lembrar e escrever, e também é super importante para a criação de elementos modernos de web design. Aqui está um exemplo:

.multiplebackgrounds (

altura: 100px;

largura: 200 px;

preenchimento: 20px;

background: url (top.gif) no canto superior direito sem repetição,

url (bottom.gif), no canto superior esquerdo, repita-y,

url (middle.gif) repetição inferior-z;

)

Prefixos do fornecedor

Os prefixos do fornecedor foram usados ​​com frequência durante o período em que o CSS3 havia sido lançado. Eles ajudaram os navegadores a interpretar o código CSS. Eles são usados ​​até hoje, caso seu navegador não consiga ler o código. Aqui estão os prefixos do fornecedor para os principais navegadores:

  • -moz- : Firefox
  • -webkit- : navegadores Webkit como Apple Safari e Google Chrome
  • -o- : Opera
  • -ms- : Internet Explorer

O prefixo do Opera também se tornou redundante desde que a empresa mudou seu navegador móvel e de desktop para a plataforma Webkit a partir do mecanismo de renderização Presto. Embora o prefixo do fornecedor continue sendo usado até certo ponto, ele desapareceu principalmente neste momento.

Adicionadas pseudo-classes

Com o CSS3 adicional, também obtivemos muitas pseudo-classes adicionais, incluindo estruturais para direcionar elementos com base na posição do documento e na relação com outros elementos diferentes. Aqui estão alguns deles:

  • : root segmenta o elemento raiz do documento
  • : not (s) segmenta elementos que não correspondem aos seletores especificados em (s)
  • : o primeiro filho segmenta o primeiro filho em um contêiner, independentemente do tipo de item
  • : o primeiro do tipo segmenta o primeiro tipo de elemento especificado em um pai
  • : enésimo filho (n) usa valores numéricos em (n) para direcionar elementos filhos em relação à sua posição no pai. Por exemplo, você pode usar isso para adicionar cores de fundo alternadas aos comentários do blog
  • : elementos de destinos vazios que não possuem texto ou filhos, como elementos vazios, como
  • : filho único segmenta elementos em uma árvore de documentos que é o único elemento filho dentro do pai

Novos seletores CSS3

O CSS3 oferece várias maneiras de escrever regras CSS por meio dos novos seletores, uma nova combinação e pseudoelementos: eis os três novos seletores de atributos:

  • Para correspondências exatas, elemento (foo = ”bar”)
  • Para combinar um elemento com um atributo chamado foo, começando com 'bar', elemento (foo $ = ”bar”)
  • Para combinar um elemento com um atributo chamado foo, terminando com 'bar', elemento (foo * = ”bar”)

O CSS3 vem com várias novas pseudo-classes, algumas das quais foram discutidas acima. Aqui estão mais alguns:

  • : nth-last-child (n) corresponde aos elementos filhos exatos do último
  • : nth-of-type (n) corresponde a elementos irmãos com o mesmo nome antes deles na árvore de documentos
  • : nth-last-of-type (n) corresponde a elementos irmãos com o mesmo nome na parte inferior
  • : last-of-type segmenta o último tipo especificado de elemento em um pai
  • : only-of-type segmenta o elemento do qual é o único tipo
  • : segmentar elementos de destino segmentados pelo URI de referência
  • : enabled corresponde ao elemento quando está ativado
  • : disabled corresponde ao elemento quando está desativado
  • : marcado segmenta o elemento quando ele é verificado por meio de uma caixa de seleção ou botão de opção

Um novo combinador

CSS3 também vem com um novo combinador: elementA ~ elementB

Esse novo combinador corresponde quando o elemento A é seguido em algum lugar depois pelo elemento B, mas não imediatamente depois.

Novas propriedades de estilo de caixa

O CSS3 apresenta o mesmo modelo de caixa da versão anterior, mas com algumas novas propriedades de estilo que ajudam a estilizar bordas e planos de fundo de suas caixas. As novas propriedades de segundo plano no CSS3 são:

  • clipe de fundo

Essa propriedade é usada para definir como recortar uma imagem de plano de fundo. As dimensões de recorte padrão são a caixa de borda, mas você pode alterá-la para a caixa de conteúdo ou de preenchimento.

  • origem de fundo

Essa propriedade específica é usada para determinar se o plano de fundo deve ser colocado na caixa de borda, na caixa de conteúdo ou na caixa de preenchimento.

  • tamanho do plano de fundo

Essa propriedade permite que o desenvolvedor indique o tamanho da imagem de plano de fundo e estique imagens menores para ajustar a página.

O CSS3 também alterou algumas das propriedades de estilo de segundo plano existentes. Aqui está uma olhada nas mudanças:

  • fundo de repetição

Esta propriedade agora vem com dois novos valores: redondo e espaço. Round redimensiona a imagem para colocá-la lado a lado várias vezes em uma caixa. O espaço espaça uniformemente a imagem lado a lado dentro da caixa sem recorte.

  • anexo de fundo

A propriedade no inclui um valor 'local' para que o plano de fundo role com o conteúdo do elemento, caso o elemento tenha uma barra de rolagem.

Novas propriedades de borda

O CSS3 permite que as bordas sejam estilizadas como duplas, sólidas, tracejadas ou mesmo como uma imagem. As imagens de borda são uma adição interessante: permitem criar uma imagem de todas as quatro bordas e, em seguida, diz ao CSS para aplicar a imagem nas bordas. Aqui estão algumas das novas propriedades de borda que acompanham o CSS3:

  • raio da borda, raio da borda inferior inferior direita, raio da borda superior direita, raio da borda superior esquerda, raio da borda inferior esquerda permite criar bordas arredondadas
  • border-image-source permite especificar um arquivo de origem da imagem em vez de usar estilos de borda predefinidos
  • a fatia da imagem da borda representa deslocamentos internos das bordas das imagens da borda
  • border-image-width define o valor da largura da sua imagem de borda
  • border-image-outset especifica a quantidade além da caixa de borda que a imagem se estende até
  • O limite da imagem da borda define o lado a lado ou a escala das partes central e lateral da imagem da borda

Conclusão - CSS3 vs CSS

Você aprenderá muito mais sobre CSS3 à medida que codifica mais. Mas há uma ressalva: você não pode dominar CSS3 a menos que conheça CSS. Aprender CSS3 envolve desenvolver sua compreensão e experiência com CSS. Se você não conhece o CSS, precisa aprendê-lo de cima, juntamente com o CSS3. O bom é que, se você não estiver familiarizado com CSS, deve ser mais fácil juntar a aprendizagem de CSS3 e CSS para torná-lo mais fácil e rápido.

Artigos recomendados

Aqui estão alguns artigos que ajudarão você a obter mais detalhes sobre o CSS3 vs CSS, basta acessar o link.

  1. CSS vs HTML
  2. Emocionante saber o CSS Flexbox Essentials para iniciantes
  3. HTML5 vs JavaScript A melhor coisa a aprender
  4. CSS vs CSS3: Diferenças

Categoria:

Desenvolvimento de software