min-width em px
@element ".minwidthpixels" and (min-width: 500px) {
.minwidthpixels {
background: #ff7941;
}
}
Crédito: Essa matéria é uma tradução e o URL do original encontra-se em https://elementqueries.com/
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.
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>
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
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
.
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>
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.
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 }
As condições responsivas disponíveis para uso de element queries são listadas a seguir:
Use o mouse para redimensionar os boxes dos exemplos a seguir.
px
@element ".minwidthpixels" and (min-width: 500px) {
.minwidthpixels {
background: #ff7941;
}
}
%
@element ".minwidthpercents" and (min-width: 50%) {
.minwidthpercents {
background: #ff7941;
}
}
px
@element ".maxwidthpixels" and (max-width: 500px) {
.maxwidthpixels {
background: #ff7941;
}
}
%
@element ".maxwidthpercents" and (max-width: 50%) {
.maxwidthpercents {
background: #ff7941;
}
}
px
@element ".minheightpixels" and (min-height: 200px) {
.minheightpixels {
background: #ff7941;
}
}
%
@element ".minheightpercents" and (min-height: 50%) {
.minheightpercents {
background: #ff7941;
}
}
px
@element ".maxheightpixels" and (max-height: 200px) {
.maxheightpixels {
background: #ff7941;
}
}
%
@element ".maxheightpercents" and (max-height: 50%) {
.maxheightpercents {
background: #ff7941;
}
}
Use o teclado para digitar caracteres ou entrar novas linhas nos campos dos exemplos a seguir.
@element ".mincharacters" and (min-characters: 30) {
.mincharacters {
background: #ff7941;
}
}
@element ".maxcharacters" and (max-characters: 30) {
.maxcharacters {
background: #ff7941;
}
}
@element ".mincharacters-input" and (min-characters: 30) {
.mincharacters-input {
background: #ff7941;
}
}
@element ".mincharacters-textarea" and (min-characters: 30) {
.mincharacters-textarea {
background: #ff7941;
}
}
@element ".maxcharacters-input" and (max-characters: 30) {
.maxcharacters-input {
background: #ff7941;
}
}
@element ".maxcharacters-textarea" and (max-characters: 30) {
.maxcharacters-textarea {
background: #ff7941;
}
}
@element ".minchildren" and (min-children: 5) {
.minchildren {
background: #ff7941;
}
}
@element ".maxchildren" and (max-children: 5) {
.maxchildren {
background: #ff7941;
}
}
@element ".minlines" and (min-lines: 5) {
.minlines {
background: #ff7941;
}
}
@element ".maxlines" and (max-lines: 5) {
.maxlines {
background: #ff7941;
}
}
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;
}
}
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;
}
}
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;
}
}
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;
}
}
@element ".scoped" and (min-width: 300px) {
/* Only set a #ff7941 background to the elements matching the query */
$this {
background: #ff7941;
}
}
@element ".scoped-multiple" and (min-width: 350px) and (max-width: 450px) {
$this {
background: #ff7941;
}
$this > b {
color: red
}
$this:hover {
background: orange;
}
}
@element ".multiple-conditions" and (min-width: 50%) and (min-height: 150px) {
.multiple-conditions {
background: #ff7941;
}
}
/* comentário antes */
@element ".comments" and (max-width: 400px) {
/* comentário no início */
.comments {
background: #ff7941;
}
/* comentário no final */
}
/* comentário depois */
$this
@element ".this-selector input" and (min-characters: 5) {
$this,
$this:focus {
border-color: red;
}
}
$parent
(pai)@element ".parent-selector input" and (min-characters: 5) {
$this {
border-color: red;
}
$parent {
background: pink;
}
}
$root
(raiz)@element ".root-selector input" and (min-characters: 5) {
$this {
border-color: red;
}
$root {
background: pink;
}
}
$prev
(anterior)@element ".prev-selector [type=email]" {
$prev {
border-color: red;
}
}
$next
(posterior)@element ".next-selector [type=text]" {
$next {
border-color: red;
}
}
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")';
}
}
EQCSS.js é copyright © 2014– Tommy Hodgins & Maxime Euzière e distribuido sob licença MIT. Ver licença completa em: Github
Ir para a página de entrada nos sites dos livros.