Cтатьи по тегу «CSS»

На днях рабочая группа CSS в W3C решила напомнить нам, что будущее уже здесь, и без лишнего шума опубликовала CSS-модуль каскада и наследования 4 уровня в статусе кандидата в рекомендации. Это не опечатка. Модуль с «магической» цифрой 4 в названии — мы бы с радостью обозвали его звучным «CSS4», если бы в этом было хоть сколько-нибудь смысла — в статусе, означающем полную теоретическую готовность спецификации. Добро пожаловать в 2016-й!

Перевод статьи Developer Fallacies с сайта heydonworks.com, опубликовано на css-live.ru с разрешения автора — Хейдона Пикеринга.

Время от времени веб-разработчики (и вообще программисты) находят неудачные аргументы в защиту своего выбора технологий, рабочих процессов или организационных схем, а также для принижения чужого выбора. Я видел такое не раз, да и сам порой не удерживался от крепкого словца по такому поводу. Мы особенно уязвимы для неудачных аргументов, поскольку привыкли считать себя логичными. Как же сильно мы порой заблуждаемся.

В этой статье я собираюсь изложить несколько часто встречавшихся мне заблуждений, и я приглашаю вас делиться своими. Некоторые из моих примеров сокращены до условности, так что смело ругайте меня, что я «пинаю соломенное чучело», если они задели вас.

Перевод статьи Blending Modes Demystified с сайта alistapart.com для css-live.ru. Автор — Джастин Макдауэл.

Веб-графика всё больше уходит от преобразований с потерей качества. Мы не хотим, чтобы изменения в дизайне или графике вредили исходному материалу. Таким образом, если нам понадобится откатить изменения или поменять что-то другое, оригинал сохранится.

Одна из последних возможностей, до которой дорвались дизайнеры — обработка изображения с режимами наложения. С режимами наложения легко добавить цвет, текстуру и иные специальные эффекты без необходимости ковыряться в графическом редакторе. Это экономит время, поскольку больше не приходится заново обрабатывать графику вручную при каждом изменении, и и избавляет от мучительной необходимости вспоминать точные параметры визуального стандарта, который, возможно, создан пару месяцев назад. Вместо этого графику можно аккуратно подключать, поддерживать и обрабатывать всего несколькими объявлениями CSS.

Что такое режимы наложения

Подборка свежих эффектов, интересных идей и полезных наработок.

Перевод статьи A Responsive Guide to Type Sizing с сайта blog.cloudfour.com, опубликовано на css-live.ru с разрешения автора — Эрика Джанга.

Начиная работу над проектом, верстальщики первым делом нередко задумываются о типографике. Если правильно подобрать компоненты для основы шрифтового оформления, многие другие элементы дизайна смогут увереннее опираться на нее. Логика этого подхода в том, что именно так строится верстка.

Пропорции — важнейший из этих компонентов. Подгонять пропорции текста, чтобы они были и красивыми, и упорядоченными, можно до бесконечности. Нелегко добиться нужных пропорций даже для одного размера экрана, не говоря уже о всех мыслимых размерах. Но эту задачу можно облегчить — даже для отзывчивого дизайна — если использовать шкалу соотношений и переложить работу на плечи математики.

С новым годом!

Перевод статьи Click SVG Element to Focus (and Style) с сайта css-tricks.com, опубликовано на css-live.ru, автор — Крис Койер.

Читатель пишет:

Вы не могли бы помочь мне сделать SVG кликабельным с помощью CSS? Задача такая: есть SVG-элемент, и по клику на любую из его частей в этом месте должна появляться обводка? Во вторник у меня собеседование по телефону на работу в качестве SVG-иллюстратора и мне не хотелось бы облажаться.

Перевод статьи `flex-grow` is weird. Or is it?s с сайта css-tricks.com, опубликовано на css-live.ru, автор — Мануэль Матузовик.

Перед вами гостевой пост Мануэля Матузовика. В нем показано, как работает flex-grow, а также его странные выкрутасы и всё такое. А затем на нескольких примерах мы увидим, как можно реализовать типовые задачи раскладки с помощью flex-grow и flex-basis.

Когда я узнал про flex-grow, то тут же сделал простой пример, чтобы понять для чего оно и как работает. Я думал, что во всём разобрался, но когда я решил попробовать его на сайте, который смастерил мой коллега, то оно меня подвело. И что бы мы ни делали, раскладка выглядела и вела себя не так, как в том примере. И я поневоле засомневался, а понял ли я вообще хоть что-то про flex-grow.

Да пребудет с вами сила.

Как стало известно из секретных¹ источников, близких к W3C, экспериментальный статус наших любимых флексбоксов почти наверняка останется в уходящем году. На прошлой неделе во время тайного совещания² члены Рабочей группы CSS приняли решение в ближайшее время перевести флексбоксы в статус кандидата в рекомендации. Т.е. в переводе с тайного языка W3C на обычный человеческий — объявить, что спецификация полностью готова, и браузеры могут смело ее реализовывать, а мы — использовать.

И в самом деле, сколько уже можно ждать. По W3Cшной традиции, для статуса кандидата в рекомендации нужно как миниум 2 совместимых реализации. А флексбоксы на сегодняшний день поддерживают больше 95% браузеров! В т.ч. больше 80% — без префикса. Для постсоветских стран CanIUse показывает цифры чуть поменьше, но их можно смело увеличивать в уме — там не учитываются Яндекс-браузер и другие «хромята», доля которых в нашей статистике вполне существенна. Если их приплюсовать, цифры будут недалеки от мировых.

Перевод статьи Classy CSS: a Programmatic Approach to Sass Stylesheets с сайта una.im, опубликовано на css-live.ru с разрешения автора — Юны Кравец.

Классный CSS, пожалуйста

Подборка свежих эффектов, интересных идей и полезных наработок.

Перевод статьи Pseudo and pseudon’t с сайта adactio.com, опубликовано на css-live.ru с разрешения автора — Джереми Кита.

Мне нравятся CSS-псевдоклассы. Они как нельзя кстати, чтобы добавлять в интерфейсы какие-нибудь приятные мелочи в ответ на действия пользователя.

Взять, например, псевдоклассы для форм: :valid, :invalid, :required, :in-range, и много чего еще.

Допустим, я хочу настроить внешний вид элемента в зависимости от того, правильно ли он был заполнен. Это может быть элемент input вроде такого:

Интересный, хотя и вызывающий немало споров, модуль CSS-переменных недавно достиг статуса кандидата в рекомендации, т.е. признан достаточно проработанным для реализации и больше не должен меняться радикально. Тем не менее, Рабочая группа CSS планирует, что обсуждение этого модуля продлится как минимум до 1 июня 2016 года (в отличие от обычных 2-3 месяцев) — всё-таки это модуль 1 уровня, добавляющий в CSS функциональность, которой там никогда прежде не было, что поневоле затрагивает его базовую грамматику и вызывает массу вопросов, как это нововведение «сработается» с другими модулями.

Незадолго до этого экспериментальная поддержка CSS-переменных снова появилась в Chrome Canary (впервые после того, как из Chrome 34 убрали старую реализацию). В Firefox они стабильно поддерживаются начиная с 31-й версии. В Microsoft они еще на рассмотрении — пока с низким приоритетом, но новый статус спецификации и ваш голос могут помочь это изменить.

Подробнее узнать о преимуществах CSS-переменных и удачных сценариях их применения можно в статье Филипа Уолтона, перевод которой есть на нашем сайте:)

Перевод статьи Why I’m Excited About Native CSS Variables  с сайта philipwalton.com, опубликовано на css-live.ru с разрешения автора — Филипа Уолтона.

Несколько недель назад CSS-переменные — точнее, пользовательские CSS-свойства — стали доступны в Chrome Canary за флагом «Экспериментальные возможности веб-платформы».^[1]

Как только один из разработчиков Chrome Эдди Османи написал о новинке в Твиттере, на него неожиданно обрушилась масса недовольства, злобы и скептицизма. По крайней мере, неожиданно для меня, учитывая, как меня эта возможность восхитила.