Hack de CSS - CSS hack

Este artigo é sobre uma técnica CSS. Não deve ser confundido com a propriedade CSS específica da Microsoft.

Um hack CSS é uma técnica de codificação usada para ocultar ou mostrar a marcação CSS, dependendo do navegador , número de versão ou recursos. Os navegadores têm diferentes interpretações do comportamento CSS e diferentes níveis de suporte para os padrões W3C . Os hacks CSS às vezes são usados ​​para obter uma aparência de layout consistente em vários navegadores que não têm renderização compatível. A maioria desses hacks não funciona nas versões modernas dos navegadores e outras técnicas, como detecção de suporte a recursos, se tornaram mais prevalentes.

Tipos de hacks

CSS inválido ou não compatível

Devido a peculiaridades na interpretação de CSS por vários navegadores, a maioria dos hacks CSS envolve escrever regras CSS inválidas que são interpretadas apenas por navegadores específicos ou confiar em bugs em navegadores específicos. Um exemplo disso é a prefixação de regras com um sublinhado (como em _width ) para direcionar o Internet Explorer 6 - outros navegadores irão ignorar a linha, permitindo que ela seja usada para escrever código específico para um navegador.

CSS não suportado

Embora as regras CSS mais recentes estejam corretas pelos padrões atuais, elas são ignoradas pelos navegadores mais antigos como "inválidas". Ao escrever regras antigas seguidas por regras mais recentes que cancelam ou modificam as antigas, é possível ativar apenas certas regras em navegadores mais antigos.

Comentários condicionais

Artigo principal: Comentário condicional

Antes da versão 10, o Internet Explorer oferecia suporte a uma sintaxe de comentário especial que permitia que blocos de HTML fossem lidos apenas por versões específicas do navegador. Esses comentários são usados ​​principalmente para fornecer soluções alternativas CSS e JavaScript específicas para versões anteriores do navegador. Nenhum outro navegador interpretou esses comentários ou ofereceu funcionalidade semelhante.

A seguir estão exemplos das diferentes sintaxes para esses comentários. 

<head>
  <title>Test</title>
  <link href="all_browsers.css" rel="stylesheet" type="text/css">
  <!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->
  <!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->
  <!--[if !lt IE 7]> <![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
  <!--[if !IE]--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
</head>

Críticos

Ocultar código usando hacks geralmente faz com que as páginas sejam exibidas incorretamente quando os navegadores são atualizados. Esses hacks podem levar a um comportamento inesperado em navegadores mais novos, que podem interpretá-los de maneira diferente de seus predecessores. Desde que o Internet Explorer 6 e 7 caíram em desuso, os hacks CSS também diminuíram. Os métodos modernos de direcionamento de recursos são menos frágeis e sujeitos a erros.

Alternativas

Prefixos de navegador

Cada um dos mecanismos de renderização de navegador mais populares tem seu próprio prefixo de fornecedor para propriedades experimentais. No entanto, devido à proliferação dessas propriedades no código ativo, o fornecedor do navegador começou a se afastar disso em favor do sinalizador de recurso.

Lista de prefixos

A seguir está uma lista de prefixos de vários mecanismos de layout:

Prefixo do fornecedor Em uso Layout Engine Criado por Usado por
-ah- sim Formatador Casa Antena Antena House Formatter
-apple- sim WebKit Apple Inc. Apple Safari 2.0 , Opera Widgets, navegadores baseados em WebKit (como prefixo legado)
-atsc- Padrões do Comitê de Sistemas de Televisão Avançada
-epub- sim WebKit Grupo de Trabalho EPUB Chromium / Google Chrome , navegadores baseados em WebKit
-fx- sim Sun Microsystems (agora adquirida pela Oracle Corporation ) Aplicativos JavaFX
-hp- Hewlett-Packard (agora HP Inc. e Hewlett Packard Enterprise )
-khtml- Sim Sim KHTML / WebKit KDE KDE Konqueror / Apple Safari 1.1 até Safari 2.0, navegadores baseados em WebKit (como um prefixo legado)
-moz- sim Gecko Fundação Mozilla Navegadores baseados no Gecko [?], Mozilla Firefox
-ms- sim Trident / MSHTML Corporação Microsoft Microsoft Internet Explorer
mso- Escritório Corporação Microsoft Microsoft Office[?]
-o- sim Presto Opera Software Opera desktop Browser até a versão 12.16 , Opera Mini e Opera Mobile até a versão 12.1 , Nintendo DS e Nintendo DSi Browser, Nintendo Wii Internet Channel
prince- sim Principe YesLogic YesLogic Prince
-rim- WebKit BlackBerry Limited Navegador RIM Blackberry
-ro- sim MARTHA Objetos reais Real Objects PDFreactor
-tc- TallComponents TallComponents
-wap- sim Presto O Fórum WAP Opera Desktop Browser e Opera Mobile, The WAP Forum
-webkit- sim WebKit / Blink Apple Inc. (WebKit) / Google Inc. (Blink) Apple Safari e Safari para iOS (WebKit), Chromium / Google Chrome desktop e celular (Blink), Opera desktop e celular da versão 14 (Blink), navegador Android (Blink), Nokia MeeGo Browser 8.5, Nokia Symbian Browser 7.0 e posterior ( WebKit), Blackberry Browser 6.0 e posterior (WebKit).
-xv- Não Presto Opera Software Navegador Opera Desktop para Windows 2000 / XP

Exemplo 

/* Cross-browser css3 linear-gradient */
.linear-gradient {

  /* Gecko browser (Firefox) */
  background-image: -moz-linear-gradient(top, #D7D 0%, #068 100%);

  /* Opera */
  background-image: -o-linear-gradient(top, #D7D 0%, #068 100%);

  /* older Webkit syntax */
  background-image: -webkit-gradient(linear, left top, left bottom,
    color-stop(0, #D7D), color-stop(1, #068));

  /* Webkit (Safari, Chrome, iOS, Android) */
  background-image: -webkit-linear-gradient(top, #D7D 0%, #068 100%);

  /* W3C */
  background-image: linear-gradient(to bottom, #D7D 0%, #068 100%);

}

Limitação

Os prefixos do fornecedor foram projetados para recursos que estavam em desenvolvimento, o que significa que a sintaxe pode nem mesmo ser final. Além disso, adicionar uma regra para a implementação de uma função em cada navegador não funciona bem quando você deseja oferecer suporte a vários navegadores. Consequentemente, os principais fornecedores de navegadores estão se afastando dos prefixos de fornecedores em favor de outros métodos, como consultas de recursos. @supports

Exclusão de recurso

Detecção de recurso JavaScript

Existem várias bibliotecas JavaScript para detectar quais recursos estão disponíveis em um navegador específico para que as regras CSS possam ser escritas para direcioná-los. Bibliotecas como Modernizr adicionam classes ao html elemento, permitindo regras CSS como . .cssgradients .header

Consultas de recursos

Um novo recurso conhecido como consulta de recursos foi introduzido no CSS3, permitindo a detecção de funcionalidade específica dentro do CSS (sem exigir o uso de uma biblioteca JavaScript para detecção de recursos ). Esta nova directiva pode ser usado para verificar se o apoio ou falta de apoio para um recurso específico, e os cheques podem ser combinadas com and , or e not . Obviamente, as regras só funcionarão em navegadores compatíveis . @supports@supports

header {
    display: block;
}

@supports (display: flexbox) {
    header {
        display: flexbox;
    }
}

Polyfills de script

Embora a detecção de recursos e regras de JavaScript possam ajudar a direcionar navegadores que requerem funcionalidade de fallback, eles não resolverão bugs em navegadores específicos ou habilitarão essa funcionalidade avançada. Polyfills , scripts que tornam o comportamento consistente em todos os navegadores, podem ser usados ​​para adicionar suporte para novas regras CSS (por exemplo, consultas de mídia no IE 8), bem como corrigir bugs em navegadores específicos. Como os polyfills adicionam ou corrigem a funcionalidade em navegadores que não a possuem, eles têm uma finalidade diferente das consultas de recursos, mas podem ser usados ​​em combinação com eles. @supports

Referências

  1. ^ "Prefixo do fornecedor" . Mozilla Developer Network . Retirado em 12 de outubro de 2016 .

links externos