8 най-модерни CSS функции (и как да ги използвате)

Съвременни CSS
(Кредит за изображение: Гети Имиджис)

CSS непрекъснато се развива и са добавени множество вълнуващи нови функции, за да направят спецификацията още по-мощно оръжие в набора от инструменти на уеб дизайнера.

CSS Grid извежда оформления на нови нива, невиждани досега, персонализираните свойства въвеждат концепцията за променливи, докато заявките за функции проверяват поддръжката на браузъра. Мултимедийните заявки се издигат на ниво с нови свойства за достъпност, променливите шрифтове предлагат максимална креативност с минимално подуване на кода, докато щракането с превъртане премахва необходимостта от JavaScript. Вижте нашето готино CSS анимация примери, за да видите какво можете да създадете. Или, за да създадете сайт без код, опитайте тези строители на уебсайтове .



За тези, които искат да проявят креативност, има CSS Shapes за уникални оформления и множество смесени режими и филтри за представяне на дизайнерски ефекти в стил Photoshop. Прочетете, за да разберете как можете да използвате тези функции, които трябва да опитате в най-новите си версии. Но помнете, сложен уебсайт означава, че имате нужда от уеб хостинг услуга, която може да поддържа вашите нужди.



01. Персонализирани свойства

Ако сте използвали препроцесор като Sass или всъщност език за програмиране като JavaScript, несъмнено ще сте запознати с понятието променливи - стойности, които са дефинирани за повторно използване в целия ви код. Персонализираните свойства ни позволяват да правим това в нашия CSS, без да са необходими препроцесори. Променливите могат да бъдат зададени на: root ниво (създаване на глобални променливи) или обхват в рамките на селектор. След това те могат да бъдат извикани с помощта на синтаксиса var (- & rsaquo; -myVariableName). Например, можем да зададем променлива, наречена --primaryColor като този:

/* On the root element (a global variable) */ :root { -​-primaryColor: #f45942; } /* Scoped to a selector */ .my-component { -​-primaryColor: #4171f4; }

Сега можем да използваме тази променлива като стойност на свойството:



h1 { color: var(-​-primaryColor); }

Персонализираните свойства се наследяват, което има някои много полезни последици. Един от тях е тематизирането. Вземете горния пример: Можем да дефинираме глобална променлива (# f45942 - ярко оранжево червено) за --primaryColor на основно ниво, така че всеки екземпляр, в който използваме тази променлива, стойността ще бъде червена. Но ние също предефинираме една и съща променлива в селектора, с различна стойност (# 4171f4 - средно синьо). Така че за всеки случай, когато използваме --primaryColor променлива в този селектор, изчислената стойност ще бъде синя.

Задаване на настройки по подразбиране

Обхватът на променливите е чудесна функция, но такава, която може да ви засече понякога! Ако се опитате да използвате променлива, която все още не е дефинирана, получената стойност ще се върне към стандартната стойност на браузъра или наследствена стойност, а не променлива, дефинирана по-нагоре в каскадата. В някои случаи може да е подходящо да зададете стойност по подразбиране:

h1 { color: var(-​-primaryColor, blue); }

Как се различават персонализираните свойства от препроцесорните променливи?

Персонализираните свойства се различават от препроцесорните променливи по няколко ключови начина. Препроцесорните променливи се компилират преди кодът ви да бъде изпратен до браузъра. Браузърът никога не вижда, че дадена стойност е променлива, той вижда само крайния резултат. Персонализираните свойства се изчисляват в браузъра. Можете да ги проверите в съвременните инструменти за разработчици, да промените променливата и да видите разрешената стойност. Те са динамични променливи, което означава, че техните стойности могат да се променят в CSS или по време на изпълнение с JavaScript.



За разлика от препроцесорните променливи, персонализираните свойства не могат да се използват в селекторни имена, ключове на свойства или декларации на медийни заявки - само стойности на CSS свойства. Препроцесорите на CSS все още имат много предимства, така че е вероятно да ги видим да се задържат още известно време, но те вероятно ще се използват по-често в комбинация с персонализирани свойства.

02. Функционални заявки

Заявките за функции са начин да проверите дали браузърът поддържа определена комбинация CSS свойство-стойност във вашия CSS файл. Те практически премахват необходимостта от библиотеки за откриване на функции като Modernizr. Синтаксисът е подобен на медийна заявка: Използвате правилото at @поддържа , последвано от двойката ви свойство-стойност, като обгръща кода, който трябва да бъде изпълнен, ако браузърът отговаря на посочените условия.

Заявките за функции се поддържат добре в съвременните браузъри, но те са сравнително нови и един „проблем“ е, че някои браузъри, които може да искате да тествате за поддръжка, може да не поддържат сами заявки за функции. Често най-добрият начин да се справите с това е първо да предоставите резервни стилове (извън заявката за функции), след което да увиете подобренията си за поддържане на браузъри вътре в @поддържа правило.

Имайте предвид, че заявките за функции трябва да се използват пестеливо. Една от чудесните характеристики на CSS е, че браузърите просто ще игнорират всички свойства или стойности, които не разбират. Най-добре е да използвате само заявки за функции, когато това не би причинило визуална грешка, в противен случай може да се настроите за много допълнителна работа.

CSS Feature Queries - caniuse.com

най-добрият учебник за професионални практики за илюстратори
Проверете уебсайта caniuse.com, за да проверите поддръжката на браузъра за функционални заявки(Кредит за изображение: caniuse.com)

Как се използват заявки за функции

За да тестваме за поддръжка на единична стойност на свойството, можем първо да предоставим резервния резервен файл. В този пример предоставяме резервна версия на flexbox за браузъри, които не поддържат Grid оформление.

.my-component { display: grid; } @supports (display: grid) { .my-component { display: flex; } }

03. Медийни заявки

Вероятно ще сте свикнали да използвате медийни заявки за откриване на ширината и височината на прозореца за показване и вида на носителя (най-често екран или печат). Спецификацията за медийни заявки от ниво 5 ни предлага някои по-нови медийни функции за (по избор), които вече се поддържат в някои браузъри. Те предлагат някои големи предимства за достъпност.

Потребителите с вестибуларни разстройства и тези, които страдат от морска болест, може да не оценят уеб страници с много движение, като анимации и ефекти на паралакс превъртане. Използвайки медийната заявка за предпочитано намалено движение, можем да предоставим на потребителите, които се откажат, алтернатива за намалено движение.

.my-element { animation: shake 500ms ease-in-out 5; } @media (prefers-reduced-motion: reduce) { .my-element { animation: none; } }

Става все по-популярно за уебсайтовете да предлагат алтернативна тъмна тема. Схемата за предпочитания-цветове ни позволява да попитаме дали потребителят е задал общосистемно предпочитание (използвайки ключовите думи тъмно, светло или без предпочитания) и съответно да покажем подходящата цветова схема.

/* Media queries 02 */ body { background: linear-gradient(to bottom, #b5faff, #ffe2b4); } @media (prefers-color-scheme: dark) { body { color: white; background: linear-gradient(to bottom, #0c1338, #3e3599); } }

04. Променливи шрифтове

Променливи шрифтове

Вижте Axis-Praxis, уебсайт за игра с шрифтове с променлива OpenType(Кредит за изображение: AxisPraxis)

Като цяло, ако искаме да включим няколко различни лица на шрифтове от едно и също семейство на нашата уеб страница, ще трябва да заредим същия брой шрифтови файлове. Колкото повече файлове с шрифтове зареждате, толкова повече тегло добавяте към страницата си, с въздействие върху производителността - така че обикновено е разумно да заредите максимум три или четири файла с шрифтове (в зависимост от бюджета за ефективност).

Променливите шрифтове променят всичко това. Те ни дават възможност да заредим един файл с шрифтове за цялото семейство шрифтове. Въпреки че този файл обикновено е по-голям от един шрифт, ако искате да се възползвате от различни тегла и стилове, тогава променливият шрифт е по-ефективното решение. Ако сте закупили цяло семейство шрифтове, не забравяйте да го приберете безопасно съхранение в облака за да не загубите файловете си!

Оста на вариация

Не само това, но и с променливи шрифтове, ние не се ограничаваме до малка част от теглото на шрифта. Когато работите с обикновени шрифтове, наличните тегла на шрифта се умножават на 100. Обикновено 400 може да бъде редовното тегло, 300 лекото тегло и 700 смелото тегло - при различни семейства, доставящи повече или по-малко тежести. Променливите шрифтове имат ос на вариация, която ни предоставя диапазон от стойности за свойства като теглото на шрифта. Шрифтът може да има ос 1–900, което ще ни осигури достъп до 900 различни тегла!

Оста на вариация не е ограничена само до теглото. Променливите шрифтове могат да имат различни оси за х-височина, наклон, дължина на серифа и контраст (за да изберете само няколко примера) - което означава, че един файл с шрифтове може да ни даде достъп до стотици или дори хиляди вариации! Можем дори да анимираме тези свойства, като ни позволяват да постигнем наистина страхотни ефекти. Манди Майкъл ( https://codepen.io/mandymichael ) има цял куп творчески демонстрации, които наистина тестват границите.

Поддръжката на браузъра за променливи шрифтове е доста добра и много леярни за шрифтове активно разработват нови променливи шрифтове, които можете да започнете да използвате сега - макар че те често имат предимство, особено за по-пълноценните семейства шрифтове. Ако просто искате да започнете да играете с променливи шрифтове, за да видите какво могат да направят, има редица сайтове с детски площадки с променлив шрифт:

Имайте предвид, че ако искате да използвате променливи шрифтове в момента, трябва да се уверите, че използвате актуална операционна система - те няма да работят на по-стари ОС.

Настройки за промяна на шрифта

Въпреки че можем да променим теглото на шрифта достатъчно лесно с шрифт-тегло CSS свойство, настройки за промяна на шрифта е ново свойство, което ни дава пълен достъп до различните оси на вариация на шрифта. Те включват както регистрирани оси, така и персонализирани оси.

Регистрирани оси

Има пет различни регистрирани оси, които съответстват на различни свойства на CSS. Всеки от тях има това, което е известно като „таг на ос“. Регистрираните оси са: wght (тегло на шрифта), ширина (разтягане на шрифта), СА (стил на шрифта: наклонен / ъгъл), пийте (стил на шрифта: курсив), opsz (оптично оразмеряване на шрифта). Ние можем да получим достъп до тези оси или чрез свойството CSS, или с настройки за промяна на шрифта .

Тези оси не са задължително всички включени във всеки променлив шрифт (някои може да имат само една или две оси), но те вероятно са най-често срещаните.

Персонализирани оси

Персонализираните оси са поръчкови оси, включени от дизайнера на шрифтове, и могат да бъдат изобщо всичко. Те могат да включват (например) дължина на serif, x-height, дори нещо по-креативно (и по-малко типично типографско), като въртене.

И двата вида оси трябва да бъдат изразени като етикет с четири знака. Регистрираните оси трябва да са малки, докато персонализираните оси са главни. И двете могат да се комбинират в свойството font-variation-settings. Настройките за промяна на шрифта са анимирани, което може да позволи някои много страхотни ефекти на потребителския интерфейс! Проведени са и много интересни експерименти с използване на иконични шрифтове.

05. Графични ефекти

CSSgram - малка библиотека за пресъздаване на филтри за Instagram

CSSgram е малка библиотека за пресъздаване на филтри за Instagram(Кредит за изображение: CSSGram)

Ако сте запознати с инструменти за проектиране като Photoshop и Illustrator, може би сте наясно с режимите на смесване и как те могат да се използват за създаване на различни ефекти върху изображенията. Начинът на смесване на режимите на смесване е смесването на два или повече слоя заедно с помощта на математически формули за изчисляване на получената стойност за всеки пиксел. Слоевете могат да бъдат всякакви - изображения, градиенти или плоски цветове. Някои режими на смесване дават потъмняващ резултат (напр. Умножение, което умножава стойностите на пикселите на слоевете), някои по-лек (например екран и наслагване). Не е нужно обаче да разбираме математиката, за да ги използваме. Играта с различни режими на смесване може да ни даде добро усещане за това кой от тях дава желаните резултати, когато се комбинира с различни слоеве.

Със свойствата на CSS режим на смесване-смесване и режим на смесване на фона , можем да постигнем подобни на Photoshop ефекти на изображения в браузъра. И двете свойства приемат еднакви стойности, но работят малко по-различно.

Фонов режим на смесване

Фонов режим на смесване смесва фоновите слоеве на елемента, към който сме насочени. Нашият елемент може да има фонови изображения, цветове и градиенти и всички те ще се смесват помежду си, без да се засяга съдържанието на преден план. Можем да посочим множество стойности за режим на смесване на фона , по един за всеки фонов слой.

.my-element { background: url(#myUrl), linear-gradient(45deg, rgba(65, 68, 244, 1), rgba(203, 66, 244, 0.5)), rgba(244, 65, 106, 1); background-size: cover; background-blend-mode: screen, multiply; }

Mix-blend-mode

Mix-blend-mode влияе върху това как елементът се смесва с родителя си и неговите братя и сестри, включително всяко съдържание на преден план и фон и псевдоелементи. Някои интересни творчески ефекти могат да бъдат постигнати чрез смесване на насложени псевдоелементи (:: преди и :: след).

.my-element { background: rgb(244, 65, 106); mix-blend-mode: multiply; }

CSS филтри

CSS филтрите също могат да се използват за създаване на поразителни визуални ефекти, като се използва филтър стойности на свойствата и филтъра. За разлика от режимите на смесване, те прилагат графичен ефект директно към елемента, към който са насочени, и елемент може да има приложени множество филтри.

Преобразуване в скала на сивото

Можем да манипулираме цветовете на елемент с по-голяма степен на контрол, отколкото да разчитаме на смесени режими. Филтрите могат да преобразуват изображение в скала на сивото, да регулират яркостта, контраста и наситеността, да размажат елемент или да добавят падаща сянка. Те също могат да бъдат анимирани и да изглеждат страхотно с ефекти на задържане.

SVG филтри

CSS филтрите всъщност са опростени версии на SVG филтри. CSS филтър собственост също отнема a url () функция, която ни позволява да предадем URL към SVG филтър. SVG филтрите са изключително мощни и позволяват някои невероятни ефекти на изображението - но те са и много по-сложни от функциите на CSS филтър! Сара Суейдан има прекрасна поредица от статии за Codrops, ако се интересувате да се потопите в кодирането на вашите собствени SVG филтри. Вижте статията на адрес https://tympanus.net/codrops/2019/01/15/svg-filters-101/

Изрязване и маскиране: отвъд правоъгълници

Свикнали сме да се занимаваме с кутии в мрежата, но не всичко трябва да е правоъгълно! Изрязването и маскирането са две страни на една и съща монета и са различни начини за скриване и показване на различни части на елемент, така че фонът да прозира. Това ни дава силата да въвеждаме интересни и креативни форми в нашия дизайн.

Клип-път

The clip-path () свойството ни позволява да „изрежем“ елемент, като дефинираме път. Отнема редица основни функции на формата, вложка (), кръг (), елипса () или многоъгълник () , което ни позволява да създадем по-сложни форми на изрязване, като използваме двойки xy координати, за да дефинираме пътя. Като алтернатива можем да преминем и в SVG път, използвайки път () функция или използване url () за предоставяне на SVG идентификатор на път.

Не вътре в пътеката

Изрязването на елемент изрязва всичко извън определения от вас път, но самият елемент все още е правоъгълник. Ако имате съдържание, което се простира извън границата на пътя на клипа, и това ще бъде изрязано - то няма да се увие във формата.

Маска-изображение

маска-изображение ни позволява да показваме и скриваме части от изображението, като използваме изображение (SVG или прозрачен PNG) или градиент като маска. За разлика от clip-path , можем да добавим текстура към нашите изображения с маскиране, тъй като източникът на маската не е необходимо да бъде път - той позволява степени на прозрачност.

06. CSS фигури

Спецификацията CSS Shapes ни позволява да обвиваме текст около плаващи геометрични фигури, създавайки интересни оформления, подобни на списания. Това е възможно с помощта на форма-отвън Имот. Подобен на clip-path , можем да дадем на това свойство основна функция на формата кръг (), елипса (), вложка (), многоъгълник () , или URL към SVG път, и всъщност двете работят в хармония много добре! форма-отвън ще обгърне нашия текст ефективно, но няма да повлияе на плаващия елемент. Ако искаме текстът да изглежда така, сякаш се увива около изображението или плаващия обект, можем да използваме същата стойност за clip-path . Използвайте марж на формата за да добавите интервали между пътя на фигурата и съдържанието, което го обвива. Погледнете Неща и глупости сайт, за да видите как CSS Shapes се използва за увиване на текст около централно изображение.

Firefox има редактор на пътеки за фигури в панела с инструменти за разработчици, което е особено полезно за работа със сложни форми. Използвайте обаче внимателно. Опаковането на предния ръб на абзац от текст е чудесно за художествен ефект, но не винаги е чудесно за потребителското изживяване. Сложните назъбени форми могат да направят блокове текст по-трудни за четене. За важно съдържание може да искате да се отклонявате.

07. Скролиране на превъртане

Превъртете щракване

CodePen на Michelle Barker демонстрира щракване на превъртане в действие(Кредит за изображение: CodePen - Мишел Баркър)

Много уебсайтове се възползват от библиотеките на JavaScript, за да осигурят гладко, естествено приложение, подобно на превъртане, където съдържанието „щраква“ към точки, докато потребителят превърта. Сега, със спецификацията Scroll Snap, можем да направим това направо в нашия CSS файл - няма нужда да импортирате тежки JS модули, за да раздуете страницата си!

За да приложим превключване на превъртане, имаме нужда от елемент, който да действа като наш контейнер за превъртане. Директните деца на контейнера диктуват точките, към които ще бъдат щракнати, и могат да бъдат подравнени по различни начини в областта на щракване.

Скролирането може да бъде още по-ефективно, когато се комбинира с друга нова стойност на свойството CSS - позиция: лепкава . Тази стойност на позицията „придържа“ елемент към определена позиция, докато превъртате в неговия контейнер - друго поведение, което преди беше възможно само с JavaScript. Вижте това скролиране с позиция: пример sticky и intersectionObserver .

08. CSS мрежа и оформления

Front-end разработчиците са хакнали оформлението с каквито и инструменти да са били на разположение по това време - най-скорошният flexbox, който се използва от много съвременни мрежови системи. Но flexbox никога не е проектиран за изграждане на строги мрежи - целта му е гъвкавост!

CSS Grid е първата спецификация, която е проектирана за двуизмерно оформление, което ни позволява пълен контрол върху изграждането на оформление и поставянето на елементи както на оста, така и на реда и колоната. Изграждането на адаптивно оформление с Grid не изисква calc () или хакване наоколо с отрицателни полета. Тайното оръжие е fr unit - ново звено, изключително за мрежата. Единицата fr оразмерява решетките (редове и колони) като пропорция от наличното пространство. Той отчита всички фиксирани песни, улуци и съдържание, след което разпределя останалото пространство по съответния начин. Джен Симънс въведе термина „присъщ уеб дизайн“, за да опише новата ера на уеб оформлението, което Grid въвежда.

Как да използвам CSS Grid

Grid изисква елемент със стойността на свойството display, зададена на grid, да действа като контейнер на мрежата. Директните дъщери на контейнера на мрежата са елементите, които могат да бъдат поставени върху мрежата. Ние използваме свойствата мрежа-шаблон-редове и мрежа-шаблон-колони за да дефинирате следите (редове и колони) на мрежата и колонна пролука и редица за определяне на улуците (пролуките между коловозите).

.grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 200px); gap: 20px; }

Използваме повторение () функция, за да поддържа кода по-кратък, като алтернатива на дългосрочното (напр. grid-template-колони: 1fr 1fr 1fr 1fr ). Този пример също използва стенографията празнина за редица и колонна пролука .

Кодът по-горе ни дава четири реда с редове, всеки 100px висок, и четири колони, които запълват еднаква част от наличното пространство, използвайки единицата fr.

Струва си да се отбележи, че това не е единственият начин за създаване на решетки. Неявни следи могат да бъдат създадени и чрез поставяне на елементи в мрежата. Полезно е да прочетете малко за това, ако използвате Grid, тъй като си струва да получите по-задълбочено разбиране за това как Grid се държи при различни условия и може да улесни кодирането на оформлението.

Можем да поставяме елементи в мрежата, като се позоваваме на номера на решетка, които са числови редове, които се намират между всяка песен. Тук използваме стенографията мрежа-колона и решетка за мрежа-колона-старт , мрежа-колона-край , grid-row-start и мрежа-ред-край . Те казват на браузъра, на кой ред трябва да започва и завършва нашата позиция по всяка ос.

.item { grid-column: 1 / 4; grid-row: 2; }

Grid ни предоставя много различни начини за поставяне на елементи: вместо това можем да назовем нашите решетки:

.grid { display: grid; grid-template-columns: [image-start] 1fr 1fr 1fr [image-start] 1fr; grid-template-rows: 200px [image-start] 200px 200px [image-end] 200px; gap: 20px; }

Като алтернатива, мрежа-шаблон-област свойството ни позволява да „нарисуваме“ решетка с текст.

.grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 200px); gap: 20px; grid-template-areas: ‘. . . .’ ‘image image image .’ ‘image image image .’ ‘. . . .’; }

Използвайки някой от тези методи, можем просто да се позовем на съответната област на мрежата, когато поставяме елемент на мрежата:

.image { grid-area: image; }

Тази статия първоначално е публикувана в списание за уеб дизайн Уеб дизайнер . Купете брой 290 сега.