Есть много дискуссий о CSS и JavaScript, и битва становится серьезно, когда CSS добавляет кучу удивительных функций, и это позволяет легче делать много вещей без JS.
CSS и JavaScript, работающие вместе, являются мощными и имеют свои достоинства, но я считаю, что чем больше CSS берет контроль над интерфейсом, тем больше устойчивости и надежности будет иметь приложение для веб-оказания.
CSS является изначально толерантным Анкет Это означает, что когда CSS Parse сталкивается с свойством, которое он не понимает, он пропускает это и движется дальше. Другими словами, вы применяете свои стили и ожидаете, что они будут работать.
JavaScript не толерант на ошибку Анкет Только одна ошибка синтаксиса JavaScript может сбить все приложение. То есть вы контролируете стиль и должны проверить, что он сработал.
Есть много Другие моменты, которые вы можете рассмотреть для использования CSS вместо JS Анкет
От таких вещей, как переходы и пользовательские свойства до анимации, фильтров или математических операций, CSS приводит нам новый способ разработки фантастических вещей, которые намного проще и проще.
В этой статье я расскажу о некоторых удивительных функциях CSS (некоторые из них действительно новые), о которых вы, возможно, не знаете, таких как плавная прокрутка, липкая навигация и другие подходы, которые ранее требовали нескольких линий трюков JS для работы. Давайте начнем!
1- Плавная прокрутка
Если ранее было необходимо несколько строк кода JS, чтобы добавить плавную прокрутку на странице, в настоящее время нам нужна только одна строка кода CSS. Это круто, не так ли? Теперь мы можем обрабатывать плавную прокрутку на нашем сайте с Свиток-Behavior CSS Property.
Посмотрим, как это работает!
html {
scroll-behavior: smooth;
}
Когда я пишу это, свойство свитца-поведения работает на Chrome и Firefox, но еще не на грани, IE или Safari (настольный компьютер или мобильный). Узнайте больше об этом в Могу я использовать Анкет
2- Липкая навигация
Одна из моих любимых функций, Sticky Navigation – это в основном фиксированный элемент на странице, который не исчезает при прокрутке пользователя. Итак, вместо offsetto и window.scroly в JS, Теперь мы можем просто использовать Положение: липкий в CSS ! 👌
header {
position: sticky;
top: 0;
}
Но вы должны понять логику Положение: липкий Чтобы правильно его использовать, когда структура вашего HTML имеет значение! (Кстати, это причина, потому что иногда это свойство не работает).
Давайте посмотрим на следующую структуру HTML:
Меню сможет придерживаться только той области, которую покрывает его родительская (главная). Так Положение: липкий имеет две основные части:
- липкий предмет : это элемент, который мы определили с
Положение: липкий(навигация). Элемент будет плавать, когда позиция Viewport соответствует определению позиции, например: Top: 0px. - липкий контейнер : это элемент HTML, который завершает липкий предмет. Это максимальная область, в которой липкий предмет может плавать. Этот «липкий родитель» определяет область, на которой может действовать «липкий предмет». «
Эта функция может резко улучшить пользовательский опыт, особенно для веб-сайтов, на которых много прокрутки.
Почти 100% поддержки браузеров Анкет 🎉
3- усеченный текст
CSS дал нам два фантастических свойства, Текст-переполнение и Строка , который может делать такие вещи, как создание ellipsis и изящно отрезать слова без JavaScript или какой -либо другой сложный метод для достижения этого. Оба свойства не новы, но очень полезны.
Давайте поближе посмотрим.
Текст-переполнение
Он контролирует, как код обрабатывает ситуации, когда текст должен быть вырезан, чтобы не превышать ни одной строки (например, название карт выше). Вы можете установить его значение как Ellipsis, и это даст вам Unicode … символ.
Оба Белое пространство: nowrap и переполнение: скрыто Свойства необходимы для работы Текст-переполнение: ellipsis Анкет
.card-title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
100% поддержка в современных браузерах
линейный переплет
Это приходит в игру, когда вам нужно добавить многострочное ограничение текста вместо одного (описание карт выше). Хотя это часть CSS Overlow Module Уровень 3 который в настоящее время является «рабочим проектом», около 95% браузеров уже поддерживают это свойство, используя префикс -Webkit- Анкет Также важно считать, что вы не можете контролировать количество персонажей, чтобы показать, но это все еще фантастическое.
Нам нужно добавить реализацию Old Flexbox с дисплей: -Webkit -box и -Webkit-box-ориентированный: вертикальный Анкет
.card-description {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
Смотрите Могу я использовать Анкет
4- Пользовательские свойства: переменные CSS
Хотя CSS препроцессоры (например, SASS, меньше и стилус) являются очень полезной и популярной технологией в мире JavaScript, потому что они расширяют CSS, добавляя такие функции, как переменные и функции, например, Теперь у нас есть мощная функция, называемая CSS Custom Properties, также известную как переменные CSS Анкет
Переменные CSS помогают нам поддерживать наши веб -приложения в соответствии – сухие – и простые в разработке тем и поддерживают. Эта функция является одной из основных причин, по которой препроцессоры были успешными. Посмотрите больше об этом здесь Анкет
При использовании нативного синтаксиса CSS: Вам больше не нужно использовать какие -либо препроцессоры для создания переменных. Они каскада (как и многие вещи, к которым мы привыкли в наших прекрасных традиционных CSS).
Создать переменную CSS очень просто, просто установите переменную, используя -- А потом мы называем функцию, называемую var () Передача переменной, которую мы создали в качестве ее аргумента. Это кусок торта, не так ли?
:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}
img {
padding: var(--spacing);
background: var(--base);
-webkit-filter: blur(var(--blur));
filter: blur(var(--blur));
}
.hl {
color: var(--base);
}
Давай катимся:)
Переменные CSS поддерживаются во всех основных браузерах За исключением IE 11.
5- Темный режим
Поскольку Apple представила Dark Mode в MacOS в прошлом году, и CSS дал нам возможность обнаружить это с помощью @Media Query, например, многие крупные приложения (такие как Twitter и Google Maps) уже имеют его. ( Список приложений Dark Mode )
Темный режим – это не только наличие красивой веб -страницы или веб -приложения. Это также пришло, чтобы помочь людям:
«Есть также люди, которые действительно нуждаются в темном режиме и используют его в качестве другого инструмента доступности, например, пользователей с низким зрением». – Томас Штайнер, инженер по решению клиентов в Google Germany
«У Молли есть синдром Ашера; условие, которое оставило ее глухих с 5 -дегривым зрением в одном глазу. (…) Чтение контента в темном режиме было бы терпимым для Молли и может принести пользу другим – улучшить опыт для пользователя с головной болью или кого -то, кто просматривает в плохо освещенной комнате. Проектирование для немногих делает ситуацию лучше для многих ». – Чарльз Рейнольдс-Талбот, дизайнер в правительстве Великобритании
Узнайте больше об этом здесь Анкет
И это может сэкономить много энергии, как Томас Штайнер в Эта статья :
«(…) темный режим, как известно, экономит много энергии на экранах AMOLED. Тематические исследования Android, которые были сосредоточены на популярных приложениях Google, таких как YouTube, показали, что экономия мощности может составлять до 60%».
Новая функция CSS, которая позволяет нам обнаружить, если у пользователя включен темный режим, называется Предпочитает цветочный схм И это уже Совместим с Chrome, Firefox, Safari и Opera Анкет
В сочетании с переменными это облегчает динамический свет и темные режимы проще, чем когда -либо для ваших посетителей.
:root {
--color: #222;
--background: #eee;
--text: 'default';
}
body {
color: var(--color);
background: var(--background);
}
body:after {
content: var(--text);
display: block;
text-align: center;
font-size: 3rem;
}
@media (prefers-color-scheme: light) {
:root {
--color: #222;
--background: #eee;
--text: 'light';
}
}
@media (prefers-color-scheme: dark) {
:root {
--color: #eee;
--background: #222;
--text: 'dark';
}
}
В зависимости от настройки вашего устройства, вы увидите стили для темного или света.
6- @Supports
В течение долгого времени разработчики используют сторонние полифиллы, такие как Modernizr (Решение JS), чтобы обнаружить, какие функции CSS поддерживаются текущим браузером. Например, при настройке -Webkit-line-clamp Для элемента вы можете проверить, работает ли это свойство в браузере, и вы, возможно, захотите предоставить некоторую резку, в противном случае.
Однако CSS создал @Supports Правило, которое позволяет нам выполнять обнаружение функций браузера непосредственно из нашего листа стилей. Это так здорово!
@Supports Директивы очень похожи на запросы @Media, и вы также можете выполнять различные комбинации, используя и или, и не условные:
@supports (-webkit-line-clamp: 2) {
.el {
...
}
}
Приведенный выше пример проверяет, поддерживает ли браузер -Webkit-line-clamp имущество. Если это произойдет, то есть, если условие возвращает истинность, будут применены правила стиля, объявленные внутри блока @Supports.
Все современные браузеры уже поддерживают эту функцию Анкет
Это я после получения этой новой функции CSS. 🤣🤣 А ты?
Вывод
Так что это некоторые из современных функций CSS в двух словах. Всякий раз, когда вы можете делать блестящие вещи без JS, используя только CSS, сделайте это.
Передний мир, который мы понимаем сегодня, меняется, и каждый раз, когда создаются новые функции, чтобы сделать нашу работу быстрее и более уфистированной. Играть в CSS и изучение новых трюков могут быть очень веселыми и интересными. Попробуйте. ❤
Я надеюсь, что вам понравился этот пост, и дайте мне знать, если я пропустил потрясающую новую функцию CSS, которую вы часто используете!
Оригинал: “https://dev.to/diogorodrigues/6-powerful-css-techniques-you-can-use-instead-of-javascript-2f44”