CSS3 e navegador Suporte
O estado atual de normas 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:
efeitos CSS3 e transformações são suportados no atual versões de todos os principais navegadores, mas o Safari, Firefox e Opera requerem diferentes prefixos de códigos para fazer efeitos CSS3 e transforma o trabalho em seus navegadores.
Tridimensionais transformações (3D) não são suportadas pelos navegadores exceto Safari e Chrome, e porque eles girar objetos ao longo da 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 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 a seguir mostra um efeito de retângulo arredondado. À direita, o browser suporta efeitos CSS3, e à esquerda, 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.
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, em seguida, criar um conjunto de cópias com diferentes prefixos.
O que se segue é um código CSS3 que cria texto distorcidos. Note-se que cinco linhas de CSS são necessários para definir o mesmo efeito inclinação para o 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: white-padding: 15px; float: right; margin-top: 6px; margin-right: 100px; mar- bottom: 6px; margin-left: 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 aplica-se a Mozilla Firefox.
o -webkit-transform-inclinação Código aplica-se a Safari e outros navegadores que aderir ao padrão WebKit (o que inclui o Dreamweaver CS5 view Live).
O genérico transformar: código de inclinação aplica-se a # 147 todos os outros, # 148- incluindo a maioria das iterações do Internet Explorer 9, que não requer um prefixo navegador para interpretar isso (ou outros) efeitos. No entanto, algumas versões de IE9 requerem o -Senhora prefixo. Então, é uma boa idéia para incluir o -Senhora prefixo apenas no caso.
o -o-border-radius código se aplica para o navegador Opera.