![CSS для Начинающих - Практический Курс [2021]](https://i.ytimg.com/vi/SpCUuyZZTp8/hqdefault.jpg)
Содержание
Горячий новый CSS: быстрые ссылкиЗапросы функций (@supports)
CSS-сетка
CSS фильтры
Переменные CSS
Фон-повтор (Круглый и Пробел)
медиа-запросы с соотношением сторон
Режим смешивания
Объект подходит
форма снаружи
currentColour
Больше правил для просмотра
Поскольку Интернет стремительно развивается, кажется, что извиняющийся CSS остался позади. Каждую неделю что-то происходит, но редко то, что имеет значение - интерфейс. Интернет следует почти вечной модели конвергенции, затем расхождения, затем конвергенции в приложениях, и теперь настала очередь CSS.
По мере появления новых структур, идей и стандартов сложность резко возрастала, и все больше и больше вспомогательных технологий изобреталось по необходимости. Для разработчиков все стало намного сложнее, поскольку люди ожидают большего, но теперь они постепенно включаются в CSS в качестве формальных стандартов. CSS стал неузнаваемым с самого начала в 1990-х годах. Хотелось бы, чтобы все было проще? Попробуйте конструктор сайтов.
А что в будущем? Теперь мы, вероятно, можем сказать, что CSS будущего увидит еще одно расхождение, поскольку появятся различные цифровые и физические устройства и каналы, даже для совершенно новой технологии. Мы, вероятно, также можем предположить, что CSS обеспечит прямой доступ к еще более богатым интерфейсам и что S-образная кривая сложности разработки и функций разработки сузится и обострится (помните, что если вы создаете сложный сайт, вам понадобится веб-хостинг, который может поддерживать приличное облачное хранилище для сохранения и обмена файлами дизайна).
Но зачем сейчас? Это наш выбор из самых последних, лучших и наиболее полезных обновлений CSS. Прочтите, чтобы узнать, как использовать запросы функций, чтобы проверить, поддерживается ли функция, прежде чем вы начнете полагаться на нее; создавать собственные макеты в стиле печати с помощью CSS Grid; ОСУШИТЕ свой код с помощью переменных CSS; взять под контроль фон с двумя фон-повтор параметры (Круглый а также Космос); исследовать медиа-запросы на основе соотношения сторон; создавать уникальные визуальные эффекты с режим смешивания; и настройте изображения, чтобы заполнить поля содержимого Объект подходит; и больше. Используйте поле быстрых ссылок напротив, чтобы перейти к нужному разделу.
Запросы функций (@supports)
При создании компонентов, использующих новые и потенциально неподдерживаемые функции, важно использовать запасной вариант. До недавнего времени это достигалось с помощью обнаружения функций с помощью JavaScript с такими плагинами, как Modernizr. Теперь это возможно прямо внутри CSS, используя новый синтаксис @supports (также известный как запрос функции).
С добавлением @supports, мы можем проверить, поддерживается ли код, который мы хотели бы использовать:
@supports (display: flex) {.hagrid {display: flex; }}
Когда страница загружается, будет произведена проверка, поддерживает ли используемый браузер функцию гибкости. Если это так, стиль в опорных скобках будет применен браузером.
Если это не так, он будет проигнорирован - стоит иметь запасной вариант, когда запрашиваемая функция не поддерживается.
Наиболее подходящий способ включения резервного кода будет зависеть от проекта и от того, что изменяется, поскольку могут быть @supports код, переопределяющий стиль по умолчанию. В других случаях может быть предпочтительнее включить другой @supports проверьте, не поддерживается ли код. Это достигается путем отрицания функционального запроса:
@supports not (display: flex) {.dobby {display: block; }}
Можно объединить несколько проверок, чтобы увидеть, все ли требуемые функции поддерживаются одновременно, чтобы применить все или ни одно из правил стиля атомарно. Синтаксис для этого очень похож на объединение медиа-запросов, например, применение стилей на устройствах разных размеров. Это достигается с помощью оператора «и» и нескольких запросов функций:
@supports (display: flex) и (transform: scaleY (3)) {.fluffy {display: flex; преобразовать: scaleY (3); }}
Двойной комбинированный запрос для а также оператор или же оператор, который проверяет, соответствует ли какой-либо из запросов функции, и применяет стиль, если поддерживается хотя бы один:
@supports (display: flex) или (transform: scaleY (1.5)) {.grawp {display: flex; преобразовать: scaleY (1.5); }}
Что-то, что полезно, учитывая, что мы уже рассмотрели переменные CSS, - это то, что с @supports вы также можете проверить, поддерживается ли настраиваемое свойство или нет, что можно сделать с помощью следующего подхода:
@supports (--ron: оранжевый) {тело {цвет: var (- ron); }}
В приведенном выше примере будет проведена проверка, чтобы увидеть, поддерживается ли условие настраиваемого свойства, и если это так, к телу будет применен оранжевый цвет шрифта. @supports доступен для использования во всех браузерах, за исключением IE 11 и ниже, хотя некоторые полифилы доступны, если вам действительно нужна поддержка, начиная с Internet Explorer 9.
Последнее замечание: это отличный способ создать новые правила стилей, но он также не менее полезен при создании веб-сайтов, которые постепенно деградируют. Если вы используете @supports затем также используйте его, чтобы проверить, поддерживает ли браузер ваши правила CSS. Это может удвоить вашу рабочую нагрузку, но также гарантирует, что вы создадите что-то, что более элегантно уменьшит масштаб браузеров.
CSS-сетка
Появление Flexbox позволило нам тратить меньше времени на загрязнение нашего кода четкими исправлениями, хитростями и обходными путями и больше сосредоточиться на написании кратких CSS и HTML. Хотя Flexbox необходим для набора инструментов любого разработчика пользовательского интерфейса, он лучше всего подходит для работы в одном направлении за раз. Обычно этого достаточно, поскольку мы обычно ограничены только по одной оси за раз (например, ограничивается ширина страницы, но не высота).
Однако в тех случаях, когда мы ограничены в обоих измерениях, скажем, в приложении в стиле панели инструментов, CSS Grid определенно подойдет вам. Начать с сетки поначалу может быть непросто, но все пройдет гладко, как только вы разберетесь с синтаксисом. Скажем, у нас есть следующая HTML-структура:
div> div> Гриффиндор / div> div> Слизерин / div> div> Равенкло / div> div> Хаффлпафф / div> / div>
Мы можем определить сетку, установить размеры, а затем определить именованные области для наших ячеек сетки:
.container {дисплей: сетка; ширина: 100ввт; высота: 100vh; } .container> div {border: 2px solid # 000; } .gryffindor {grid-area: гриффиндор; цвет фона: # C91018; } .слизерин {область сетки: слизерин; цвет фона: # 26A147; } .ravenclaw {область сетки: ravenclaw; цвет фона: # 005782; } .hufflepuff {grid-area: hufflepuff; цвет фона: # FFD63C; }
Наконец, на .контейнер мы можем использовать сетка-шаблон-области свойство, чтобы расположить то, что мы хотим, чтобы сетка выглядела как:
.container {дисплей: сетка; ширина: 100ввт; высота: 100vh; grid-template-зонах: "gryffindor slytherin slytherin ravenclaw" "gryffindor slytherin slytherin ravenclaw" "gryffindor hufflepuff hufflepuff ravenclaw"}
Кроме того, существует целый ряд дополнительных свойств для точной настройки представления сетки. Назвать несколько:
сетка-столбец-разрыв: размер>; Желоб между колоннами
сетка-строка-разрыв: размер>; Желоб между рядами
сетка-шаблон-столбцы: размер>; Ширина столбцов, разделенные пробелами для нескольких
сетка-шаблон-строки: размер>; Ширина строки, разделенные пробелами для нескольких
align-items: center | конец | начало>; Выровняйте содержимое каждой ячейки сетки по вертикали
align-items: stretch>; Вертикально заполнить ячейку полностью
justify-items: center | конец | начало | растянуть>; Как и выше, по горизонтальной оси
места-элементы: выровнять элементы> / justify-items>; Сокращенное обозначение, комбинирование выровнять элементы а также обосновать элементы
Итак, на практике мы могли бы обновить нашу предыдущую сетку:
.container {дисплей: сетка; ширина: 100ввт; высота: 100vh; сетка-шаблон-области: «Гриффиндор Слизерин Слизерин Когтевран» «Гриффиндор Слизерин Слизерин Когтевран» «Гриффиндор Хаффлпафф Хаффлпафф Когтевран»; сетка-столбец-разрыв: 10 пикселей; сетка-строка-промежуток: 15 пикселей; сетка-шаблон-столбцы: 200 пикселей авто авто 200 пикселей; align-items: stretch; justify-items: stretch; }
Все это лишь малая часть возможностей CSS Grid - можно сделать гораздо больше. В настоящее время это поддерживается во всех современных браузерах, за исключением IE11, хотя он поддерживает старый синтаксис.
Но подождите, это еще не все! С помощью CSS Grid мы, наконец, можем централизованно выравнивать контент без лишних усилий:
.container {дисплей: сетка; высота: 100vh; места-предметы: центр центр; }
Следующая страница: фильтры CSS и переменные CSS
