Fazer seu trabalho CSS 3 Através Navegadores Web

Se você está projetando seu site para o ambiente de trabalho, bem como para o iPhone e iPad, você ainda pode usar o CSS experimental 3! Eventualmente, o CSS 3 em seu site provavelmente será suportado. O exemplo nesta seção mostra como proteger suas apostas para o futuro.

Para qualquer um dos -webkit- exemplos de código (que cobrem versões amados Safari 3 e 4), criar outra regra CSS idêntico -moz- para cobrir o Firefox e regra de uma CSS com apenas o nome de raiz para cobrir os mais novos navegadores: Opera 10.5, o Internet Explorer 9, Safari 5, Chrome, e futuros navegadores.

Aqui está um exemplo de um conjunto de regras para arredondar os cantos de uma caixa:

-webkit-border-radius: 12px; / * Saf3-4 * / - moz-border-radius: 12px; / * FF1 + * / border-radius: 12px; / * Opera 10.5, IE 9, Saf5, Chrome * /

As novas tags semânticas em HTML5 funcionar bem em Safari no iPhone e iPad, mas não na maioria dos navegadores da Web mais antigos ainda comuns na web. Para fazer estes novos elementos funcionam em navegadores mais antigos, tudo que você tem a fazer é definir as regras de estilo para exibição para quadra para definir as tags semânticas, como elementos a nível de bloco. Esta ação faz com que eles atuam como tags em navegadores mais antigos.

Como nem todos os navegadores interpretam HTML e CSS, da mesma forma, muitos desenvolvedores web começar a desenhar páginas, criando estilos que removem qualquer fronteira, estofamento, ou margens incluídas em uma tag HTML, definindo um estilo que define esses valores a 0 (como você vê no exemplo a seguir).

O processo de reinicialização elementos ajuda a garantir que todos os estilos que você criar irá exibir de forma mais consistente em diferentes navegadores, porque todas as suas tags começam com a mesma tela em branco. É uma boa prática para o Safari no iPad e iPhone, e para outros navegadores.

Neste exemplo, a exibição foi definido como quadra e, simultaneamente, ajustar a fronteira, preenchimento, e margem para 0, para assegurar uma exibição mais consistente em diferentes navegadores:

artigo, de lado, rodapé, cabeçalho, menu, nav, seção, detalhes, mesa, corpo, H1, H2, H3, p, ul, li, {border: 0- margin: 0- padding: 0-display: BLOCO}