Uma das tarefas (consideradas) complicadas na codificação de front-end é verificar se um elemento está visível ou não. A maneira muito ingênua de verificar se um elemento está visível (ou seja, se tem presença ou ocupa espaço na página) é verificar seu valor de estilo de exibição:
var incorrectIsVisible = window.getComputedStyle(someElement, null).getPropertyValue('display'); // "inline", "inline-block", "block", etc.
Observe que estou não verificar a opacidade também porque um elemento invisível ainda ocupa espaço na tela. O problema com o código acima é que o senhor pode obter o estilo de um filho, mas isso pode não ter importância se o pai estiver definido como display: none. Por exemplo, se o estilo do filho display da criança for inline-block, mas o pai do elemento display é o estilo noneo elemento filho ainda não está visível. Curiosamente, a verificação do estilo offsetHeight do elemento filho sinalizará se o elemento provavelmente está visível:
var correctIsVisible = someElement.offsetHeight; // 0 for hidden, more than 0 for displaying
Se o elemento for filho de um elemento que é display: none, o offsetHeight será 0 e, portanto, o senhor sabe que o elemento não está visível, apesar de seu display . Novamente, lembre-se de que a opacidade não é considerada e que um elemento que é opacity: 0 ainda é tecnicamente visível, ocupando espaço.
Criação de efeitos de paralaxe de rolagem com CSS
Introdução Há muito tempo, os sites com o chamado efeito “parallax” são muito populares… Caso o senhor não tenha ouvido falar desse efeito, ele basicamente inclui diferentes camadas de imagens que se movem em diferentes direções ou com diferentes velocidades. Isso leva a uma…
CSS @supports
A detecção de recursos via JavaScript é uma prática recomendada do lado do cliente e por todos os motivos certos, mas, infelizmente, essa mesma funcionalidade não está disponível no CSS. O que acabamos fazendo é repetir as mesmas propriedades várias vezes com cada prefixo de navegador. Que nojo. Outra coisa que…
