В мире javascript, интерактивных веб-сайтов и приложений большинство разработчиков забыли, насколько красив и полезен CSS. Сейчас для большинства разработчиков CSS - наименее любимый навык. Почему? Потому что
Он просто украшает, не имеет логики и возможности манипулирования данными. CSS используется только для изменения размера шрифта, цвета, заполнения и т. д., он не может делать ничего, кроме этого.
Это причины, по которым приводит большинство разработчиков. Но сегодня я собираюсь поделиться несколькими новыми функциями CSS3, которые заставят вас снова влюбиться в css.
Все демонстрации кода находятся здесь: https://github.com/Neha/css3-demos
Видео обо всех перечисленных ниже функциях доступны здесь.
1. CSS-фильтры
Применять фильтры к фотографиям в Instagram и Prisma - это весело. Представьте, что такая же функция реализована в CSS ... Было бы весело? Черт возьми !! Вы сказали это, и W3c вас слушает. Представляя вам фильтры CSS, более 8 фильтров для инвертирования, оттенка, размытия и т. Д. Вы можете использовать их в своем CSS и поиграть с ними. Поддержка браузера не так ограничена. Вы также можете использовать резервные копии для фильтров. Вот пример кода.
2. Переменные CSS
Одной из самых больших недостающих функций в CSS были переменные. Раньше мы ненавидели, когда нам приходилось копировать и вставлять одно и то же значение и изменять его в очень многих местах. Наиболее утомительно было, когда несколько разработчиков работали над одним файлом css, а один и тот же красный не соответствовал вашей таблице стилей. Но теперь, благодаря собственным переменным CSS - пишите один раз, используйте повторно !!
3. CSS-миксы
Любите переменные CSS? Вы полюбите миксины больше.
Ненавижу повторять один и тот же блок кода снова и снова? Любите функции миксинов SASS / LESS? Теперь больше не нужно переходить на препроцессоры для миксинов. CSS3 имеет собственные миксины - правило @apply.
4. CSS-сетки
Откажитесь от поплавков, откажитесь от flex-box и попрощайтесь с фреймворками RWD. Будущее структуры веб-страниц уже здесь - CSS Grids. Сетки CSS позволяют создавать 2D-структуру только с помощью CSS. Сетки CSS позволяют разделить страницу на СТРОКИ и КОЛОННЫ. Мало того, что он поставляется с множеством функций, которые позволяют вам контролировать - содержимое сеток, сетку на странице, максимальную-минимальную-высоту / ширину, управление контентом и, что самое удивительное, он поставляется с новым модулем fr, который приносит магию отзывчивости на вашей странице. Больше не нужно возиться со сложной структурой HTML,% ширины / высоты. Просто используйте сетку CSS, и все готово.
Https://github.com/Neha/css3-demos/tree/master/cssGrids
5. CSS Calc ()
Ненавижу вычислять Div без отступов, границы? Ненавижу попадать в% подсчет столбцов? Что ж, теперь оставьте все математические вычисления вашему CSS, поскольку он поставляется с новым свойством - calc (). Все, что вам нужно сделать, это просто указать значения, переменные, которые вы хотите вычислить, и он выполнит все вычисления самостоятельно. Разве это не впечатляет? Теперь, если вы плохо разбираетесь в математике, не беспокойтесь, CSS все еще ваша игра !!
У вас есть что добавить в этот список? Дайте мне знать в разделе комментариев.
