Suporte css3 e navegador

O estado atual de padrões para suporte ao navegador web para efeitos CSS3 e transformações está em fluxo. Muito provavelmente, ao longo do tempo os poderes-que-ser no mundo do navegador - aqueles que publicam Internet Explorer, Safari, Firefox e Chrome (e outros) - vai chegar a um acordo comum sobre como codificar para efeitos CSS3.

Mas agora, eles não chegaram a tal acordo. Isso significa que, pelo menos até o momento, estes novos efeitos legais têm de ser definidas separadamente para diferentes navegadores.

Aqui está o que você precisa saber sobre o suporte a CSS3 e navegador:

Video: Qual o Melhor Navegador de Internet ?

• efeitos CSS3 e transformações são suportados em atual versões de todos os principais navegadores, mas o Safari, Firefox e Opera requerem diferentes prefixos código para fazer efeitos CSS3 e transforma trabalho em seus navegadores.

• Tridimensionais (3D) transformadas não são suportadas pelos navegadores excepto Safari e cromo, e porque eles rodam objectos ao longo do X-eixo (horizontal) ou y-eixo (vertical), eles não fazer muito sem javascript adicional para animá-los. Dito isto, o mundo do CSS3 transforma está em fluxo e constante desenvolvimento e transformações 3D pode ganhar o apoio mais amplo e tornar-se mais acessível para os desenvolvedores.

• efeitos CSS3 e transformações de trabalhar bem em cada ambiente de navegação moderna. Você só precisa incluir versões redundantes de cada efeito, com diferentes prefixos navegador, a fim de fazê-los funcionar em todos os navegadores.

• Alguns navegadores obsoletos não suportam efeitos CSS3 e transforma em tudo.

  Use efeitos CSS3 e transforma de tal forma que, mesmo se um navegador não suporta CSS3, o conteúdo da página não está corrompido. A figura seguinte mostra um efeito de rectângulo arredondado. À direita, o browser suporta efeitos CSS3, e do lado esquerdo, o navegador não apoiá-los. Em ambos os ambientes, você pode ler o conteúdo, e alguns efeitos de design, como a cor da caixa e da fonte, são suportados.

  
  
  
  

  

  Video: Conheça o Opera Neon, o navegador que vai se misturar à Área de Trabalho

  Porque cada dispositivo digital vem com ferramentas de copiar e colar, o fluxo de trabalho envolve a criação de um efeito ou transformar a propriedade, e em seguida, criar um conjunto de cópias com diferentes prefixos.

O seguinte é o código CSS3 que cria texto distorcidos. Note-se que cinco linhas de CSS são necessários para definir o mesmo efeito de inclinação para Firefox, Safari, Opera, Internet Explorer, e uma versão genérica. (As pessoas que fazem navegadores parecem gravitar em direção a versão genérica, mas isso não é adotado universalmente.)

.inclinação {background-color: # 999-height: 300px; width: 300px; -moz-transform: inclinação (12deg, 0deg) - webkit-transform: inclinação (12deg, 0deg) - ms-transform: inclinação (12deg, 0deg) - O-transform: inclinação (12deg, 0deg) -Transforme: inclinação (12deg, 0deg) -cor: branco-padding: 15px; flutuador: direita; margem superior: 6px; margem direita: 100 p; marginalmente inferior: 6px; margem-esquerda: 6px;}

Quatro dessas variações do CSS3 transformar têm prefixos (-moz, -webkit, -Senhora, e -o) - a versão genérica não tem um prefixo. Cada prefixo aplica-se a diferentes mecanismos subjacentes nestes browsers:

• o -moz-transform-inclinação Código se aplica a Mozilla Firefox.

• o -webkit-transform-inclinação Código se aplica a Safari e outros navegadores que aderem ao padrão WebKit (o que inclui o Dreamweaver CS5 vista Live).

• O genérico transformar: Código de inclinação aplica-se a “todos os outros”, incluindo a maioria das iterações do Internet Explorer 9, que não requer um prefixo navegador para interpretar essa (ou outros) efeitos. No entanto, algumas versões do IE9 exigem a -Senhora prefixo. Então, é uma boa idéia para incluir o -Senhora prefixo apenas no caso.

• o -o-fronteira-raio código se aplica para o navegador Opera.