Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Web Design
  2. CSS
Webdesign

Como Construir um Componente de Interface Usando Consultas de Elemento

by
Difficulty:IntermediateLength:ShortLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Nesse tutorial continuaremos nossa discussão sobre consultas de elemento, aprendendo a criar um componente responsivo e reutilizável.

Recaptulando: consultas de elemento permitem moldar elementos com base nas caracteríticas do container: largura, altura e outros. Vale lembrar que consultas de elementos estão bem longe de ser um padrão CSS e provavelmente teremos de esperar alguns anos antes que isso aconteça.

Por hora, teremos de usar bibliotecas JavaScript para emular sua funcionalidade, tal como EQCSS.

EQCSS

EQCSS é um biblioteca JavaScript criada por Tommy Hodgins. Vejamos alguns do motivos para usarmos essa biblioteca.

Para começar, EQCSS dá-nos uma sintaxe similar à das consultas de mídia do padrão CSS3, através do @element. Funciona tanto em folha de estilo quanto em elementos style, logo é bem intuitiva. No código a seguir, por exemplo, empilhamos os menus de navegação para lidar com o espaço reduzido da navegação (não da tela).

EQCSS oferece mais que consultas de alturas e larguras. Também provê consultas baseadas em quantidade, permitindo-nos aplicar regras com base no conteúdo; no número de caracteres; linhas; e elementos existentes.

Ele suporta várias unidades CSS, incluindo as recentes vw, vh, vmin e vmax.

E para aqueles que necessitam de suporte ao IE, ela também provê um polyfill.

EQCSS está diposnível via Bower, NPM, CDNJs e diretamente do repositório no Github. Escolha qualquer método que se encaixe na implantação do projeto e garanta tê-la carregada na página.

Agora, construamos algo!

O HTML

Construiremos um componente de interface de perfil de usuário, e começaremos com o código HTML.

Nosso componente consiste em um avatar, no nome do usuário, local de residência, pequena biografia e um botão "seguir" à la Twitter ou Medium.

O CSS

Primeiro, configuraremos a largura do container do componente, depois seu modo de visualização para flex. A sintaxe do flexbox no código abaixo está sem prefixos para facilitar, logo, funcionará apenas nos navegadores atuais. Se preciso, poderá usar o Autoprefixer para gerar a sintaxe antiga bem como os prefixos para suportar navegadores antigos.

Depois, configuramos a proporção entre o avatar e o resumo do perfil contendo o nome, local e pequena biografia.

Também ajustamos levemente o tamanho da fonte do nome do usuário e da localização.

Essas são as regras principais para demonstrar como as consultas de elementos funcionam. As regras estilísticas, como background-color, text-color e box-shadow dependem só de você. No meu caso, aparecerá dessa forma.

Implantando Consultas de Elementos

É bem intuitivo usar consultas de elementos com EQCSS. Como mencionado, a sintaxe lembra as consultas de mídia do CSS. Primeiro, como mostrado anteriormente, criamos uma consulta de elemento com @element seguido de um ou mais seletores e a condição da consulta, como largura, altura, posição da barra de rolagem, etc, tudo em relação ao elemento.

Podemos implantá-lo em nosso componente, por exemplo, redimensionando a largura do elemento no container e ajustando a fonte quando a largura do container for reduzida.

Além disso, o componente deve ser reutilizável e, mais importante, apresentável em qualquer parte do site independente da largura. Na barra lateral, por exemplo, onde a largura, geralmente, é menor que 400px. Nesse caso, como a largura é muito menor, temos de realinhar o layout do componente inteiro.

Resumindo

No tutorial, construimos um componente de perfil de usuário. É responsivo e muda de acordo com seu container ao invés da largura do dispositivo. Veja a página de demonstração e perceba como o componente muda de forma independente. Ótimo!

Isso é só um exemplo. Existem inúmeros exemplos que outros mostraram a possibilidade de uso das consultas de elementos.

Lembre-se, a sintaxe nesse tutorial é baseada completamente no EQCSS–se o W3C adotará ou criará sua própria, não está decidido. No mais, espero que essa ideia seja adotada e revolucione a forma como construimos sites de novo.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.