5 записей с тегом "css"

CSS: Как создать и использовать CSS-переменную?

:root {
  --main-bg-color: brown;
}

.one {
  background-color: var(--main-bg-color);
}

CSS: Порядок псевдоклассов важен

/* WORKS */ 
a:hover{ color: red; }
a:active{ color: green; }

/* NOT WORKS */
a:active{ color: green; }
a:hover{ color: red; }

CSS: Функция min()

Функция min() принимает одно или большее количество значений, разделённых запятой, и возвращает наименьшее из них. Эту функцию используют для ограничения значений CSS-свойств жёстко заданным максимальным уровнем.

padding: min(85%, 9.75em) 0;

CSS: Размытие заднего плана с backdrop-filter: blur()

CSS свойство backdrop-filter: blur(); применяет размытие заднего плана (эффект размытия) к элементу и его содержимому. Cтепень размытия задается пикселях. Чем больше значение, тем сильнее эффект размытия. Это свойство обычно используется для создания эффекта замыленного заднего плана или прозрачного эффекта.

backdrop-filter: blur(7px);

JS: Поиск неиспользуемых правил CSS

Откройте сайт и выполните в консоли браузера:

(function() {
  for (var ssi = 0; ssi < document.styleSheets.length; ssi++) {
    let rules;
        try {
        rules = document.styleSheets[ssi].cssRules || [];
    } catch (e) {
        rules = []
    }
      
    var sheetHref = document.styleSheets[ssi].href || 'inline';
 
    for (var ri = 0; ri < rules.length; ri++) {
      if (!document.querySelectorAll(rules[ri].selectorText).length) {
        console.log(`${sheetHref}: "${rules[ri].selectorText}" not found.`);
      }
    }
  }
})();

Или используйте более продвинутый вариант: https://gist.github.com/pointofpresence/22915d3b00deb411501be240c2ad4c0e