Técnicas essenciais de HTML, CSS e JavaScript

Autor: Monica Porter

Data De Criação: 22 Marchar 2021

Data De Atualização: 17 Poderia 2024

Técnicas essenciais de HTML, CSS e JavaScript - Criativo

Contente

Layout
Clearfix
Dimensionamento da caixa
Multi-colunas
Cálculos
Estilo
Transparência
Filtros
Substituição de imagem
Vídeo responsivo
Funcionalidade
Selecionando elementos facilmente
Criação de novos arrays
Limpar documentos e objetos de janela
Gostou disso? Leia isso!

Este artigo apareceu pela primeira vez na edição 234 da revista .net - a revista mais vendida do mundo para web designers e desenvolvedores.

Uma técnica, em sua essência, é uma forma de realizar uma tarefa e, sendo desenvolvedores e designers front-end, temos muitas tarefas. Dito isso, muitas vezes esquecemos o quanto essa paisagem mudou. De 2002 a 2010, nossa comunidade estava apodrecida com o excesso de código e recursos, prejudicando o desempenho e a capacidade de manutenção. Para superar isso, criamos uma série de dicas, truques e hacks que apelidamos de "técnica". Ainda estávamos realizando tarefas, mas não da maneira mais eficiente.

Fazendo um 360, os últimos anos viram melhores padrões e implementações de padrões ganharem vida, permitindo-nos, como uma comunidade, desenvolver "técnicas" mais novas e avançadas. Essa nova paisagem é considerada a "web moderna".

À medida que a 'Web 2.0' ficava estagnada e confusa, o mesmo ocorre com a 'web moderna'. Dê-lhe tempo. Dito isso, por enquanto, podemos usar e abusar do termo, desde que haja um entendimento comum do que ele representa.

Em 2010, a especificação HTML5 chegou, fornecendo um ambiente da web totalmente novo e semipadronizado. Navegadores como Opera, Firefox, Chrome e Safari abraçaram essa nova onda e levaram suas equipes de desenvolvimento a novos limites de implementações de padrões e exploração de API. Para ter uma ideia de como esses navegadores estão "integrados", verifique as visualizações de www.html5readiness.com sobre como alterar o suporte a HTML5.

Não se preocupe com a falta de suporte no Internet Explorer. Podemos combater isso graças ao Frame do Google Chrome. Desde que o Google o introduziu em 2010, ele se tornou o mecanismo de suporte obrigatório para o Internet Explorer. Todas as versões do IE podem ser direcionadas com o Chrome Frame, que solicita que um novo usuário baixe um plug-in que renderiza sites aceitos com uma versão leve do Chrome, dentro do IE. Para implementar o Chrome Frame, adicionamos a seguinte meta> tag na tag head> do nosso site.

meta http-equiv = "X-UA-Compatible" content = "chrome = 1" />

A partir daqui, podemos solicitar aos usuários do IE que baixem o plug-in, se ainda não estiver instalado, usando JavaScript:

script type = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / script>
script>
window.onload = function () {
CFInstall.check ({
modo: "overlay",
destino: "http://www.yourdomain.com"
});
};
/ script>

O destino pode ser definido para enviar o usuário a um determinado link após a instalação do plug-in. Uma palavra de cautela: embora o Chrome Frame nos forneça um método de desenvolvimento estritamente para navegadores verdadeiramente modernos, não devemos esquecer que o usuário tem a opção de não baixar o plug-in se não quiser. Se não, e você é obrigado a fornecer suporte para uma ou outras versões diferentes do IE, você terá que gastar mais algum tempo descobrindo o que você pode e não pode fornecer, com suas experiências, cross-browser.

Com este código fornecendo um campo de jogo consideravelmente mais nivelado para o desenvolvimento na pilha da web moderna, podemos seguir em frente com nossas mentes à vontade. Você pode se lembrar de ter que criar uma série de hacks específicos do navegador para ter seu site estruturado corretamente em vários navegadores, criando um número incontável de elementos vazios para serem usados com suas imagens fatiadas, ou até mesmo escrevendo código JavaScript excessivamente detalhado ou redundante para obter o mais simples de funcionalidade para trabalhar. Todas essas dores são, em certo sentido, os mesmos problemas com os quais nos preocupamos hoje. Ainda estamos lutando por mais controle e melhores ferramentas para combater o layout, estilo e funcionalidade, mas em um nível que é maduro.

Layout

Clearfix

Flutuar um elemento foi introduzido no CSS 2.1, mas nunca se tornou a solução completa que esperávamos. Um dos maiores problemas era manter as dimensões de um elemento pai quando um elemento filho era flutuado. Para resolver isso, a técnica clearfix foi criada.

Pegue o seguinte HTML:

div>
div> ... / div>
div> ... / div>
/ div>

Esta técnica foi escrita por Nicolas Gallagher:

.clearfix: antes,
.clearfix: após {
contente: " ";
display: mesa;
}
.clearfix: após {
limpar ambos;
}
.clearfix {
* zoom: 1;
}

Se você usar o HTML5Boilerplate para iniciar seus projetos, você já terá esta versão da técnica clearfix incorporada.

Dimensionamento da caixa

Durante anos, os desenvolvedores debateram qual implementação de modelo de caixa fazia mais sentido. O modo Quirks vs Standards realmente significava: 'as dimensões de um elemento devem mudar, depois de serem definidas, quando as bordas e o preenchimento são aplicados, ou não'.

Agora é amplamente aceito que faz mais sentido que as bordas e o preenchimento retirem o espaço disponível em um elemento e não aumentem a largura ou altura do elemento. O debate tornou-se irrelevante com a ampla implementação do dimensionamento de caixas. O navegador seguirá suas dicas em vez de vice-versa.

Popularizada por Chris Coyier e Paul Irish, uma técnica abrangente pode ser implementada com o seguinte:

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
dimensionamento da caixa: caixa de borda;
}

O uso do seletor * em CSS tem sido debatido, devido a possíveis ocorrências de desempenho. Esses tipos de reivindicações são frívolos se você não estiver hiperotimizando todos os outros aspectos do seu site / aplicativo. O uso de border-box fará com que o navegador adicione preenchimento e bordas dentro do conjunto de espaço disponível. O ‘modo de padrões’ pode ser usado configurando o tamanho da caixa para caixa de conteúdo.

Multi-colunas

A web foi muito inspirada pela forma e tipo de escrita. Infelizmente, ficamos presos na fase do pergaminho. Alguns desses problemas estão chegando ao auge com as especificações de Paged-Media e Regiões CSS. Dito isso, os primeiros passos em direção a layouts de revistas foram dados quando os navegadores começaram a implementar CSS com várias colunas. O código para gerar este efeito é bastante simples:

p {
-webkit-column-count: 2;
-moz-coluna-contagem: 2;
contagem de colunas: 2;
}

Você pode aprender mais sobre a especificação CSS3 de várias colunas, bem como um fallback de JavaScript que pode ser usado para qualquer navegador sem suporte, no blog de A List Apart.

Cálculos

Calcular dimensões pode ser difícil. Antigamente, não tínhamos como fazer qualquer tipo de cálculo de unidade, muito menos cálculos de unidade mistos. Tudo mudou graças ao calc. Criar um efeito de preenchimento que não afeta a largura inicial dos elementos ou utiliza algo como box-sizing: border-box; era, até recentemente, possível apenas adicionando elementos de contenção extras.

.padded {
margem: 0 automático;
posição: relativa;
largura: -webkit-calc (100% - (20px * 2));
largura: -moz-calc (100% - (20px * 2));
largura: calc (100% - (20px * 2));
}

calc () cuida do cálculo de largura adequado com base na largura-pai de .padded e menos um preenchimento de 20px definido. Eu multipliquei isso por 2 para cada lado do meu elemento, centralizando o elemento utilizando o posicionamento relativo e uma margem esquerda e direita automática.

Estilo

Transparência

Obter o estilo certo de um elemento sempre dependeu do tipo de ferramentas que tínhamos à nossa disposição em CSS. Transparência é uma das primeiras variantes de suporte que você encontraria do início a meados dos anos 2000.

Com o advento do HTML5 e esforços de padrões mais focados, os navegadores têm uma implementação padrão da propriedade opacity e expõem o suporte ao canal alfa de acordo com a nova especificação do Módulo de cores. Isso inclui as diretrizes RGBA e HSLA.

uma {
cor: rgba (0,255,0,0,5);
fundo: rgba (0,0,255,0,05);
fronteira: rgba (255,0,0,0,5);
}

Você pode usar cores RGBA ou HSLA sempre que encontrar valores HEX. Há também uma extensa lista de cores divertidas com nomes definidos que você pode conferir diretamente nas especificações. Eles são úteis quando você deseja criar uma mistura dinâmica entre elementos.

Filtros

Os filtros CSS são extremamente interessantes. Ter a capacidade de alterar dinamicamente a aparência dos elementos em uma página sem a necessidade de plug-ins de terceiros é incrível e ajudará a reduzir muito o tempo gasto no Photoshop.

img src = "market.webp">
img {
-webkit-filter: tons de cinza (100%);
}

Os filtros CSS são atualmente suportados apenas em navegadores WebKit, portanto, seu uso deve ser de natureza aditiva, não dependente. Leia mais aqui.

Substituição de imagem

Substituir texto por imagens já existe há muito tempo. Infelizmente, ainda existem desvantagens, em termos de acessibilidade, para as técnicas de substituição de imagem mais recentes e sofisticadas. Mas recentemente surgiram dois que são extremamente inteligentes e únicos em seus próprios direitos. O primeiro foi escrito por Scott Kellman:

h1 class = ’hide-text’> Logotipo do meu site / h1>
.hide-text {
recuo de texto: 100%;
espaço em branco: nowrap;
estouro: oculto;
}

O segundo foi escrito por Nicolas Gallagher:

.hide-text {
fonte: 0/0 a;
sombra do texto: nenhum;
cor: transparente;
}

Vídeo responsivo

Fazer com que a mídia seja dimensionada corretamente em um ambiente responsivo pode ser um desafio. Com cada vez mais sites respeitando o design adaptativo, é essencial lidar com as dimensões e proporções dos elementos de maneira adequada.

O vídeo incorporado tem sido um dos tipos de mídia mais desafiadores devido à maneira como os serviços de terceiros veiculam o conteúdo. Uma incorporação típica do YouTube se parece com isto:

iframe width = "640" height = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>

O elemento iframe contém um objeto Flash ou elemento embed. Usando algo como iframe {maxwidth: 100%; } não funcionará porque os elementos aninhados não são redimensionados corretamente quando a largura muda. Então, temos que fazer alguns truques.

div>
iframe width = "640" height = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>

Encapsular o iframe em outro elemento nos dará o controle de que precisamos para adicionar a funcionalidade responsiva adequada ao vídeo.

.vídeo {
posição: relativa;
fundo acolchoado: 56,25%;
altura: 0;
estouro: oculto;
}
. iframe de vídeo,
objeto .video,
.video embed {
posição: absoluta;
topo: 0;
esquerda: 0;
largura: 100%;
altura: 100%;
}

Configurando o padding-bottom do envoltório .video: 56,25%; é a magia deste método. Usar preenchimento significa que a porcentagem usada será baseada na largura do pai; '56 0,25% 'criará uma proporção de 16: 9. Faça as contas você mesmo, se quiser. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (esta é a nossa porcentagem).

Funcionalidade

Selecionando elementos facilmente

Com a popularidade de várias bibliotecas JavaScript (jQuery, por exemplo), o comitê ECMAScript e os padrões W3C notaram uma das principais peças de funcionalidade que faltava nativamente aos desenvolvedores - uma boa seleção de elementos. Métodos como getElementByID () e getElementByClassName () eram rápidos, mas não tão flexíveis e robustos quanto os motores do seletor vindos da comunidade de desenvolvedores; querySelectorAll () era a maneira do corpo de padrões de imitar parte dessa flexibilidade em um método seletor nativo.

var items = document.querySelectorAll (’# header .item’);

querySelectorAll () pode receber vários seletores e seletores mistos. Leia mais sobre isso.

Criação de novos arrays

Iterar sobre um array é algo que se torna cansativo de escrever. Escrever e reescrever loops for () não é divertido. No JS versão 1.6, o método map () pousou fornecendo suporte para uma maneira fácil de iterar e criar um novo array a partir de outro.

var people = [’Heather’, ’James’, ‘Kari’, ’Kevin’];
var welcome = people.map (function (name) {
return ‘Hi’ + name + ’!’;
});

Executando este código, se estivéssemos em console.log (welcome), você veria welcome é um novo array [‘Hi Heather! ',‘ Hi James!', ‘Hi Kari! ',‘ Hi Kevin!' ]

Limpar documentos e objetos de janela

Bibliotecas JavaScript de terceiros tendem a mexer com documentos nativos e objetos de janela. Isso pode ser um problema para outras bibliotecas de terceiros e para o desenvolvedor que as inclui. Como qualquer uma das partes, certifique-se de trabalhar com uma versão limpa de ambos os objetos, criando uma nova instância deles. A melhor maneira de fazer isso é criando um elemento iframe, inserindo-o no DOM e armazenando as novas instâncias desses objetos.

var iframe = document.createElement (’iframe’);
iframe.style.display = "nenhum";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);

Embora tenha havido grandes melhorias na pilha da web, continuar a aperfeiçoar e sofisticar nosso pacote de tecnologia para atender aos desafios que enfrentamos no layout, estilo e funcionalidade de nosso projeto ainda é extremamente importante. Para manter um bom ecossistema de crescimento, devemos encorajar órgãos de padronização e fornecedores de navegadores a continuar o progresso com novas especificações e implementações de recursos inovadores, enquanto compartilhamos nosso próprio conhecimento com outros desenvolvedores e designers. Mais percepções, menos hacks.

Darcy Clarke é um desenvolvedor premiado, cofundador da empresa temática do WordPress Themify e do agregador de ofertas diárias DealPage, e membro da equipe jQuery. Ele trabalha na Polar Mobile como desenvolvedor UX sênior.