EQCSS uma extensão CSS para element queries

visualizações Publicado em: 06/06/2016

Crédito: Essa matéria é uma tradução e o URL do original encontra-se em http://elementqueries.com/

Introdução

Nota do Maujor

Element queries é uma funcionalidade do design responsivo que foi publicada como Rascunho de Trabalho pelo RICG (Responsive Image Community Group) em 15 de janeiro de 2015 e encontra-se em discussão pela comunidade. Não é uma especificação do W3C, mas vale lembrar que o RICG tem contribuído de forma efetiva e decisiva com as técnicas do RWD, tendo sido um dos grandes responsáveis pelos estudos de implementação das técnicas para servir imagens reponsivas que acabaram por ser adotadas como especificação pelo W3C.

Element queries é uma técnica CSS de design responsivo que consiste em se criar queries cujas condições se baseiam em características de um elemento isolado da página e não nas dimensões da viewport ou nas caractísticas intrínsicas da mídia como acontece com as media queries.

Ao contrário das @media queries, @element queries não se limitam às dimensões da viewport ou características da mídia, pois com ela é possível escrever condicionais para várias situações baseadas por exemplo no número de caracteres de texto em um elemento ou ainda quantos elementos-filhos um elemento contém.

Element queries acrescenta à linguagem CSS o conceito de "escopo" de estilização para um determinado elemento da mesma forma como funções da linguagem JavaScript criam um escopo para suas variáveis.

Como usar EQCSS

EQCSS é um plugin JavaScript que possibilita usar a diretiva @element em nossa folha de estilos. Com preocupação e foco na performance o plugin foi escrito em JavaScript puro e assim não requer jQuery ou outra biblioteca qualquer para funcionar - basta adicionar o script EQCSS.js à marcação HTML e pronto, pode usar a diretiva na página.

Ver EQCSS no Github Ver EQCSS no NPM

Feito o download de EQCSS atrele o script ao HTML de cada página que usar element queries. É melhor atrelar o plugin com uso da tag <script> imediatamente antes da tag de fechamento de <body> conforme sintaxe mostrada a seguir:

<script src=EQCSS.js></script>

Se pretendermos oferecer suporte para o IE8 devemos usar também um polyfill para @media queries e @element queries para aquele navegador. Atrele este polyfill à marcação HTML da página antes do ponto onde foi atrelado o plugin EQCSS, conforme mostrado a seguir:

<!--[if lt IE 9]><script src="EQCSS-polyfills.js"></script><![endif]-->
<script src=EQCSS.js></script>    
    

Links para os scripts em CDN

EQCSS está hospedado em CDNjs ( https://cdnjs.com/libraries/eqcss ) e em nossos projetos podemos lincar para o CDN conforme mostrado a seguir:

https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.1.0/EQCSS-polyfills.min.js
https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.1.0/EQCSS.min.js

Sintaxes para Element Queries

Depois de atrelar EQCSS à HTML podemos começar a usar element queries. Existem duas maneiras de escrever a diretiva @element: a mais fácil é escrever dentro da própria folha de estilos do site seja ela vínculada ao documento com uso do elemento <style> ou lincada com uso do elemento <link>, a outra maneira é criar uma folha de estilos externa e exclusiva para as regras EQCSS.

Neste caso, devemos lincar a folha externa EQCSS cujo arquivo deverá receber a extensão tradicional .css ou a extensão .eqcss.

Folha EQCSS externa com uso de <script>

Embora não seja obrigatório podemos optar por esta solução usando a extensão .eqcss para o arquivo externo e lincando ao documento com uso do elemento <script> conforme mostrado a seguir:

<script type="text/eqcss" src=styles.eqcss></script>

É possível ainda atrelar scripts EQCSS inline com a sintaxe mostrada a seguir:

<script type="text/eqcss">

  /* escreva EQCSS aqui */

</script>

Rodando EQCSS

Por padrão o plugin "roda" quando a página é carregada ou quando a janela do navegador é redimensionada (similar a @media queries). A função EQCSS.apply() pode ser chamada manualmente ou quando da ocorrência de um evento, tais como os eventos keyup ou clicks, ou ainda quando houver interação com um elemento específico.

Escrevendo Element Queries

A sintaxe geral para Element Queries é conforme mostrada a seguir:

@element {seletor} and {condição} [ and {condição} ]* { {css} }
  • {seletor} - é um seletor CSS que tem como alvo um ou mais elementos, tais como, "#id" ou ".class"
  • {condição} - compreende uma medida e um valor.
  • {css} - pode conter qualquer regra CSS válida, tal como, #id div { color: red }

Condições responsivas

As condições responsivas disponíveis para uso de element queries são listadas a seguir:

Queries de width

  1. min-width
  2. max-width

Queries de height

  1. min-height
  2. max-height

Queries de contagem

  1. min-characters
  2. max-characters
  3. min-lines
  4. max-lines
  5. min-children
  6. max-children

Queries de scroll

  1. min-scroll-y
  2. max-scroll-y
  3. min-scroll-x
  4. max-scroll-x

Meta seletores

  1. $this
  2. $parent
  3. $root

Função CSS

  1. eval("")

Vejamos a seguir exemplos demonstrativos das diferentes condições

Use o mouse para redimensionar os boxes dos exemplos a seguir.

min-width em px

class="minwidthpixels"
@element ".minwidthpixels" and (min-width: 500px) {
  .minwidthpixels {
    background: #ff7941;
  }
}

min-width em %

class="minwidthpercents"
@element ".minwidthpercents" and (min-width: 50%) {
  .minwidthpercents {
    background: #ff7941;
  }
}

max-width em px

class="maxwidthpixels"
@element ".maxwidthpixels" and (max-width: 500px) {
  .maxwidthpixels {
    background: #ff7941;
  }
}

max-width em %

class="maxwidthpercents"
@element ".maxwidthpercents" and (max-width: 50%) {
  .maxwidthpercents {
    background: #ff7941;
  }
}

min-height em px

class="minheightpixels"
@element ".minheightpixels" and (min-height: 200px) {
  .minheightpixels {
    background: #ff7941;
  }
}

min-height em %

class="minheightpercents"
@element ".minheightpercents" and (min-height: 50%) {
        .minheightpercents {
          background: #ff7941;
        }
      }

max-height em px

class="maxheightpixels"
@element ".maxheightpixels" and (max-height: 200px) {
  .maxheightpixels {
    background: #ff7941;
  }
}

max-height em %

class="maxheightpercents"
@element ".maxheightpercents" and (max-height: 50%) {
  .maxheightpercents {
    background: #ff7941;
  }
}

min-characters em elementos nível de bloco

Use o teclado para digitar caracteres ou entrar novas linhas nos campos dos exemplos a seguir.

class="mincharacters"
@element ".mincharacters" and (min-characters: 30) {
  .mincharacters {
    background: #ff7941;
  }
}

max-characters em elementos nível de bloco

class="maxcharacters"
@element ".maxcharacters" and (max-characters: 30) {
  .maxcharacters {
    background: #ff7941;
  }
}

min-characters em inputs de formulário

@element ".mincharacters-input" and (min-characters: 30) {
  .mincharacters-input {
    background: #ff7941;
  }
}
@element ".mincharacters-textarea" and (min-characters: 30) {
  .mincharacters-textarea {
    background: #ff7941;
  }
}

max-characters em inputs de formulário

@element ".maxcharacters-input" and (max-characters: 30) {
  .maxcharacters-input {
    background: #ff7941;
  }
}
@element ".maxcharacters-textarea" and (max-characters: 30) {
  .maxcharacters-textarea {
    background: #ff7941;
  }
}

min-children

class="minchildren"

@element ".minchildren" and (min-children: 5) {
  .minchildren {
    background: #ff7941;
  }
}

max-children

class="maxchildren"

@element ".maxchildren" and (max-children: 5) {
  .maxchildren {
    background: #ff7941;
  }
}

min-lines

class="minlines"
@element ".minlines" and (min-lines: 5) {
  .minlines {
    background: #ff7941;
  }
}

max-lines

class="maxlines"
@element ".maxlines" and (max-lines: 5) {
  .maxlines {
    background: #ff7941;
  }
}

min-scroll-x

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

@element ".min-scroll-x" and (min-scroll-x: 50%) {
  .min-scroll-x {
    background: #ff7941;
  }
}

max-scroll-x

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

@element ".max-scroll-x" and (max-scroll-x: 50%) {
  .max-scroll-x {
    background: #ff7941;
  }
}

min-scroll-y

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

@element ".min-scroll-y" and (min-scroll-y: 50%) {
  .min-scroll-y {
    background: #ff7941;
  }
}

max-scroll-y

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

@element ".max-scroll-y" and (max-scroll-y: 50%) {
  .max-scroll-y {
    background: #ff7941;
  }
}

Queries em escopo ($this)

class="scoped"
class="scoped"
@element ".scoped" and (min-width: 300px) {

  /* Only set a #ff7941 background to the elements matching the query */
  $this {
    background: #ff7941;
  }
}

Queries em escopo com múltiplas condições

class="scoped-multiple"
class="scoped-multiple"
@element ".scoped-multiple" and (min-width: 350px) and (max-width: 450px) {
  $this {
    background: #ff7941;
  }
  $this > b {
    color: red
  }
  $this:hover {
    background: orange;
  }
}

Múltiplas condições

class="multiple-conditions"
@element ".multiple-conditions" and (min-width: 50%) and (min-height: 150px) {
  .multiple-conditions {
    background: #ff7941;
  }
}

Comentários

class="comments"
/* comentário antes */
@element ".comments" and (max-width: 400px) {
  /* comentário no início */
  .comments {
    background: #ff7941;
  }
  /* comentário no final */
}
/* comentário depois */

Meta seletores

Seletor $this

class="this-selector"
@element ".this-selector input" and (min-characters: 5) {
  $this,
  $this:focus {
    border-color: red;
  }
}

Seletor $parent (pai)

class="parent-selector"
@element ".parent-selector input" and (min-characters: 5) {
  $this {
    border-color: red;
  }
  $parent {
    background: pink;
  }
}

Seletor $root (raiz)

class="root-selector"
@element ".root-selector input" and (min-characters: 5) {
  $this {
    border-color: red;
  }
  $root {
    background: pink;
  }
}

Seletor $prev (anterior)

class="prev-selector"
@element ".prev-selector [type=email]" {
  $prev {
    border-color: red;
  }
}

Seletor $next (posterior)

class="next-selector"
@element ".next-selector [type=text]" {
  $next {
    border-color: red;
  }
}

Funções CSS

eval("")

Ano atual:

Dimensões da viewport:

@element "strong" {
  $this:after {
    content: ' eval("new Date().getFullYear()")';
  }
}
@element "em" {
  $this:after {
    content: ' eval("window.innerWidth+' x '+window.innerHeight")';
  }
}

Demonstrações de Element Query

Documentação & Tutoriais

Leitura complementar

Projetos semelhantes

EQCSS notícias

Licença

EQCSS.js é copyright © 2014– Tommy Hodgins & Maxime Euzière e distribuido sob licença MIT. Ver licença completa em: Github