10 métodos de retorno úteis para CSS e Javascript

Os fallbacks de código são a solução perfeita para comprometer seus muitos visitantes únicos. Nem todos na web estão usando o mesmo sistema operacional, navegador da Web ou hardware físico. Todos esses fatores indicam como sua página na web será realmente exibida na tela. Ao trabalhar com novos truques CSS ou JavaScript, você encontrará erros técnicos.

Mas não deixe essas armadilhas desencorajá-lo! Neste guia eu juntei alguns dos técnicas de fallback mais comuns para web designers com foco em CSS e JavaScript / jQuery. Quando tudo mais falhar, você deseja fornecer aos usuários pelo menos a funcionalidade básica da página. Simplicidade reina suprema no campo do design de experiência do usuário.

Confira nosso guia abaixo e deixe-nos saber seus pensamentos e perguntas na seção de comentários.

1. Cantos arredondados com imagens

Técnicas CSS3 dispararam para o design da web convencional. Uma das propriedades mais notáveis ​​é raio de borda que permite cantos arredondados on-the-fly. Eles ficam lindos em praticamente qualquer botão, div ou caixa de texto. O único problema é o suporte limitado entre navegadores da web.

Muitos navegadores mais antigos, incluindo o Internet Explorer 7, não suportam essa propriedade. Então, para manter os cantos arredondados funcionando para todos os navegadores padrão, você precisará criar um fallback com imagens.

O código padrão usa propriedades CSS3 regulares no div principal enquanto acomoda as imagens em cada um dos cantos. Você provavelmente precisará configurar alguns divs extras dentro do contêiner principal que são usados ​​para exibir imagens de canto em segundo plano.

#mainbox -webkit-border-radius: 5px; / * Safari * / -moz-border-radius: 5px; / * Firefox \ Gecko Engine * / -o-fronteira-raio: 5px; / * Opera * / border-radius: 5px;  #mainbox .topc background: url ('corner-tl.png') sem repetição superior esquerda;  #mainbox .topc span fundo: url ('corner-tr.png') não-repetição superior direita;  #mainbox .btmc background: url ('corner-bl.png') no-repeat no canto inferior esquerdo;  #mainbox .btmc span fundo: url ('corner-br.png') sem repetição no canto inferior direito;  

Para evitar o estresse, sugiro usar um aplicativo como o RoundedCornr. É um aplicativo da web no navegador que gera CSS de canto arredondado usando CSS3 e imagens. Isso será especialmente útil para designers que não têm acesso a softwares gráficos, como o Photoshop ou o GIMP..

2. Sistema de menus suspensos do jQuery

Os sistemas de menus suspensos são perfeitos para a Web atual. No entanto, o maior problema é que os visitantes acessam seu site sem o JavaScript ativado. Neste caso, nenhum dos seus menus funcionaria de forma alguma! A melhor solução é usar CSS para exibir / ocultar cada um dos blocos div do submenu e exibi-los em foco.

O único problema com essa solução é que o Internet Explorer 6 não oferece suporte a esses seletores de foco do CSS. No entanto, o IE7 + funciona muito bem; e, é claro, todos os navegadores funcionarão bem se o JavaScript estiver habilitado em primeiro lugar. O código deste tutorial sobre CSS Plus é um dos melhores recursos que encontrei. Ele fornece não apenas uma solução com jQuery, mas também o CSS necessário para problemas do IE.

/ * Uma classe de corrente será adicionada via jQuery * / #nav li.current> a background: # f7f7f7;  / * CSS fallback * / #nav li: hover> ul.child display: block;  #nav li: hover> ul.grandchild display: bloco;  

Fonte

Outra solução alternativa que você pode tentar é apenas exibir abertamente cada um dos menus no IE6. Você pode usar comentários condicionais do Internet Explorer para aplicar folhas de estilo com base na versão do navegador. Claro, esta não será a solução mais bonita, mas simplesmente funcionará.

Se você não acha que o Internet Explorer 6 é uma grande preocupação, não se preocupe com esse recurso alternativo. O tutorial e o código subseqüente acima devem ser suficientes para obter o carregamento do menu JavaScript, mesmo com CSS estrito em todos os principais navegadores.

3. Estilos de Internet Explorer direcionados

Tenho certeza que todos nós sabemos sobre os problemas de renderização do Internet Explorer da Microsoft. Eu posso dar um pouco de crédito para o seu mais recente IE8 e perspectivas futuras com o IE9. No entanto, ainda há uma pequena audiência executando o IE6 / IE7 e você realmente não pode ignorá-los ainda.

(Fonte da imagem: github)

Comentários condicionais, como mencionado na última seção, podem ser úteis para reformatar áreas da página. Por exemplo, se você tiver um menu suspenso com sub-navegação no IE6 que só será exibido usando JavaScript, você estará sem sorte tentando CSS como um método de fallback. Em vez disso, a melhor solução é exibir cada sub-lista como um bloco de navegação.

Adicionando o código acima ao seu cabeçalho de documento, você pode especificar o tipo de exibição para cada sub-navegação. A melhor parte sobre esse recurso é que você pode sobrescrever o CSS e ainda mostrar / ocultar dinamicamente os menus quando o JavaScript estiver ativado. Caso contrário, você apenas exibirá uma lista aberta de links. Você poderia usar um código semelhante ao que eu adicionei abaixo.

#nav li position: relative; largura: 150px; / * deve definir uma largura finita para IE * / #nav li ul / * códigos de sub-nav * / display: block; posição: absoluta; largura: auto; / * define sua própria largura ou define no elemento li * / #nav li ul li largura: 100%;  

4. Opacidade / Transparência Legado do IE

Um dos muitos bugs irritantes com o Internet Explorer é o negócio com a opacidade. As configurações de transparência alfa em CSS3 podem ser alteradas por meio da propriedade opacidade. No entanto, no caminho da Microsoft, somente o Internet Explorer 9 suporta atualmente esse recurso.

A melhor solução para segmentar o IE6 + é por meio de filtro, uma configuração proprietária reconhecida apenas pelo IE. Confira o exemplo de código breve abaixo:

.mydiv opacidade: 0,55; / * CSS3 * / filter: alpha (opacidade = 55); / * IE6 + * / 

Tudo o que você precisa fazer é incluir a linha acima em qualquer elemento que exija transparência. Observe que, semelhante à propriedade CSS3, todos os elementos filhos também herdarão essa alteração de opacidade. Se você estiver procurando por um método mais recente que segmente especificamente o IE8, confira o código abaixo. Ele se comporta da mesma maneira que nossa propriedade de filtro é reconhecida apenas pelo analisador Microsoft IE8.

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha (opacidade = 55)"; / * IE8 * / 

5. Criando botões CSS3 com imagens substitutas

Os botões são um fantástico elemento web para todos os tipos de interfaces. Eles podem se comportar como entradas de formulário, itens de navegação ou até links diretos de página. Com o CSS3, agora é possível formatar botões com muitos estilos exclusivos, como gradientes de fundo, sombras de caixa, cantos arredondados, etc..

No entanto, você não pode confiar que todos os visitantes poderão renderizar essas propriedades mais recentes. Ao criar um design de fallback para botões (ou até mesmo elementos semelhantes de interface do usuário), há duas opções distintas. A primeira é incluir uma imagem de fundo projetada exatamente como o CSS pareceria. Isso pode ser facilmente realizado no Photoshop. No entanto, se você não é um especialista no software, isso pode ser problemático.

A alternativa é recorrer a uma cor de plano de fundo simples e a estilos CSS mais simples. Eu estou usando alguns dos exemplos de código de CSS-Tricks grande post sobre gradientes CSS3. Todos os principais navegadores, incluindo Safari, Firefox, Chrome e até mesmo o Opera, suportam essas propriedades. A área onde você vai encontrar problemas é o suporte de navegadores legados: motores Mozilla mais antigos, IE6 / 7, possivelmente até mesmo o Mobile Safari.

.gradiente-bg cor de fundo: # 1a82f7; / * usa uma cor sólida na pior das hipóteses * / background-image: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); background-image: -webkit-gradient (linear, 0% 0%, 0% 100%, de (# 2F2727), para (# 1a82f7)); background-image: -webkit-linear-gradient (superior, # 2F2727, # 1a82f7); background-image: -moz-linear-gradient (superior, # 2F2727, # 1a82f7); background-image: -ms-linear-gradient (superior, # 2F2727, # 1a82f7); background-image: -o-linear-gradient (superior, # 2F2727, # 1a82f7);  

Fonte

O único pequeno problema com o uso exclusivo de imagens como um método de fallback é que você não terá uma alteração de estado ativa quando o usuário clicar em um botão. Você poderia criar duas imagens diferentes para esses estados regulares versus ativos, embora fosse necessário algum trabalho extra. Só esse motivo pode levar você a usar uma cor de plano de fundo sólida em vez de imagens de fallback. Experimente algumas soluções diferentes para ver qual fica melhor em seu layout.

6. Verificando o conteúdo do celular

Outra grande tendência em 2012 é a popularidade da navegação na Internet móvel. Os smartphones estão por toda parte e os dados por 3G / Wi-Fi estão se tornando cada vez mais acessíveis. Assim, muitos designers estarão procurando fornecer um layout de fallback para usuários móveis.

Alguns navegadores da Web para dispositivos móveis populares renderizam páginas semelhantes a um ambiente de área de trabalho. Mobile Safari e Opera são mais conhecidos por isso, mesmo suportando muitos scripts comuns do jQuery. Mas essas páginas nem sempre são compatíveis com dispositivos móveis e há espaço para expandir o uso do UX.

Existem duas maneiras de detectar navegadores móveis e exibir um layout ou uma folha de estilo alternativa. O primeiro é através do JavaScript, que funciona muito bem como uma ferramenta frontend. O script que eu adicionei abaixo é muito simples e verifica apenas os usuários do iPhone / iPod Touch. Detect Mobile Browsers é um site fantástico que oferece um script mais detalhado que você pode executar.

// Redirecionar função iPhone / iPod Touch isiPhone () return ((navigator.platform.indexOf ("iPhone")! = -1) || (navigator.platform.indexOf ("iPod")! = -1));  if (isiPhone ()) window.location = "m.oseudomínio.com";  

Agora a outra alternativa é verificar através de uma linguagem de backend como o PHP. Você pode verificar uma variável conhecida como HTTP_USER_AGENT. Dezenas de sites aparecerão se você usar esses termos no Google. No entanto, eu ainda recomendo o link Detect Mobile Browsers que eu adicionei no parágrafo anterior.

O site tem scripts para download gratuitos para análise não apenas em PHP, mas também em toneladas de outras linguagens de backend populares. Isso inclui ASP.NET, ColdFusion, Rails, Perl, Python e até códigos baseados em servidor, como IIS e Apache..

7. Slider Slicebox com recuo gracioso

Meu freebie CSS3 favorito de 2011 provavelmente tem que ser o Slicebox 3D Image Slider lançado pela Codrops. Ele utiliza belas transições de animação CSS nos navegadores que as suportam, atualmente no Google Chrome e no mais recente no Safari. É estranho que mesmo o mais recente lançamento do Firefox ou IE9 ainda não possa usar essas transições.

A melhor parte sobre esse código é que ele ainda fará fallback para fornecer efeitos básicos de transição entre as imagens. Concedido que grande parte da animação é realizada através do jQuery, mas a opção de fallback CSS padrão ainda é muito confiável, considerando quantos navegadores não suportam animações CSS3 chamativas.

Alternativamente, a Codrops também lançou recentemente outro painel de imagens deslizantes que utiliza técnicas CSS3 ainda mais criativas. Este controle deslizante de imagem é criado usando imagens de fundo em CSS, então, mesmo sem os efeitos de transição, ele se comporta de maneira muito suave.

8. Método Failsafe CDN Script jQuery

A biblioteca jQuery tornou-se quase essencial para o desenvolvimento de JavaScript na web. Muitos fornecedores de CDN alternativos criaram URLs estáticas onde hospedam todas as versões de lançamento do jQuery. Google, Microsoft e até mesmo o próprio jQuery criaram um portal CDN para desenvolvedores, entre alguns outros sites menos conhecidos.

Existem possivelmente centenas de milhares de desenvolvedores dependentes desses provedores. O que aconteceria se algum dos links fosse quebrado por qualquer razão ou os servidores ficassem offline? Seria uma boa ideia hospedar uma cópia local e implementá-la apenas se você precisar dela. Bem, este ótimo trecho de código de fallback de CSS-Tricks permite que você faça exatamente isso!

Fonte

9. Caixas de seleção exclusivas em HTML5

O HTML5 abriu a porta para alguns estilos interessantes para criar sites. Parte dessa experiência aprimorada na Web é através de formulários e elementos de entrada. As caixas de seleção são apenas um exemplo que pode ser altamente personalizado para atender às suas necessidades.

Eu me deparei com este maravilhoso tutorial CSS / jQuery postado no início da primavera de 2011. Ele oferece um método simples de criar switches no estilo da Apple para suas caixas de seleção que degradam graciosamente em navegadores mais antigos. O código usa imagens de fundo para substituir os estilos de ativação / desativação entre interações do usuário.

Os elementos da caixa de seleção de entrada original ficam ocultos por padrão e seu valor é determinado por meio de chamadas de JavaScript. Isso significa que você pode dinamicamente puxar o valor a qualquer momento através do jQuery, mas também será passado para o formulário ao atingir o “enviar” botão.

Supondo que o JavaScript esteja desativado ou não seja suportado em navegadores mais antigos, o script será padronizado para as entradas regulares de HTML. Isso também desativará o CSS para os estilos de caixa de seleção mais novos, para que pareça que nada foi alterado. O roteiro se comporta mais como um favorito estético com um substituto limpo do que qualquer outra coisa. Mas esses controles deslizantes parecem fantásticos, e as mesmas técnicas podem ser aplicadas a outros campos de entrada de formulário, como menus e botões de seleção.

10. Vídeo Suportado em HTML5

As novas especificações do HTML5 têm sido muito progressivas em muitas áreas. Os elementos de vídeo e áudio têm suporte nativo aprimorado para um grande número de arquivos de mídia. No entanto, verifica-se que, entre os navegadores compatíveis com HTML5, nem todos concordam com os tipos de arquivo.

O Mozilla Firefox geralmente suporta vídeo .OGG, que você pode usar o VLC como um conversor. O Google Chrome e o Safari procuram arquivos .MOV codificados em .MP4 ou H.264. Por causa dessas diferenças, você normalmente teria que incluir três formatos de vídeo diferentes - os dois listados acima junto com um fallback .FLV.

Felizmente alguns caras realmente espertos montaram uma biblioteca chamada VideoJS. É uma compilação de JavaScript extremamente pequena que permite uma única implementação de vídeo em Flash e HTML5 em uma tag. É gratuito para download e código aberto, portanto, os desenvolvedores podem contribuir também. Os players de vídeo Flash e HTML5 são personalizados para serem idênticos, de modo que todos os usuários terão a mesma experiência. Confira o exemplo de código de incorporação de vídeo em HTML5:

Fonte

Seguindo uma rota semelhante, o projeto html5media oferece um método para consolidar todas as mídias de fluxo em um tipo de arquivo. Infelizmente, mesmo o VideoJS não é perfeito em todos os navegadores. O que o projeto html5media tentou fazer é solucionar as incompatibilidades do navegador para suportar qualquer tipo de arquivo de vídeo entre todas as plataformas. E isso realmente funciona muito bem!

Conclusão

Espero que este guia de métodos de fallback úteis seja útil para desenvolvedores da Web em todo o mundo. Pode ser difícil construir sites para se adaptar a uma ampla gama de especificações de software. Isso é especialmente verdadeiro quando você está trabalhando com muitas linguagens diferentes, como CSS e JavaScript.

Mas as tendências estão indicando que estamos nos aproximando de uma era mais favorável no design da web. Nunca antes foram acordados mais navegadores e padrões da web, especialmente no CSS3 e HTML5. Essas técnicas são apenas algumas das muitas que devem ser consideradas ao criar páginas da Web compatíveis com padrões. Como desenvolvedor da Web, você sempre quer acompanhar as tendências de design mais recentes e adaptar-se para melhor atender ao seu público.