Архив автора: SelenIT

Псевдостоинства и непсевдостатки

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

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

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

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

CSS-переменные стали кандидатом в рекомендации

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

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

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

Почему я в восторге от «родных» CSS-переменных

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

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

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

CSS Grid Layout включен по умолчанию в Firefox 45.0a1

В ноябре Firefox (ночные сборки, на сегодня это версия 45.0a1) стал первым браузером, в котором нынешняя версия CSS Grid Layout включена по умолчанию. Можно скачать, установить, запустить и сразу проверять примеры из наших статей, не «колдуя» в настройках. Похоже, разработчики Firefox всерьез решили выпустить 45-ю версию с полноценной поддержкой Grid — количество свежезакрытых багов по этой теме впечатляет. Уже 14 декабря эта версия перейдет в статус альфы, а там всего 3 месяца — и релиз. ВеCSSна обещает быть жаркой! :)

Вверх по водопаду: задачка для CSS-супергероя

Настоящего героя, владеющего суперсилой CSS-спецификаций, трудно сбить с толку. Но в жизни, как и в супергеройском кино, попадаются задачи, на первый взгляд неразрешимые. Например: есть страничка, которую кто-то нехороший собирается через 5 секунд погрузить во тьму, установив ей style="background:#000 !important" на body. Нужно «спасти» страничку, сохранив ее в читаемом виде, с белым фоном… ну хотя бы минут десять. Хотя бы в новейших браузерах.

Ну и поскольку это задачка для CSS-супергероя, то единственное, чего можно касаться — это CSS странички. Ни разметку, ни «злодейский» скрипт трогать нельзя. И чтобы не было слишком легко, псевдоэлементы использовать тоже нельзя.

See the Pen MaxvxJ by Ilya Streltsyn (@SelenIT) on CodePen.

Инлайновый стиль, да еще и с !important. Абсолютное оружие. В известной визуализации «SpeciFISHity» авторства Эстель Вайл (Стандартисты) — атомная бомба. Казалось бы, что можно ему противопоставить?

Сентябрьские новинки W3C

Начало осени в W3C выдалось весьма «урожайным». Рабочая группа API устройств выпустила два черновика для работы с датчиками приближения и фонового освещения, позволяющие скриптам регировать на изменение физического окружения мобильного устройства. Рабочая группа SVG обновила текущий черновик своего основного труда — спецификации SVG2. Спецификация веб-уведомлений, детище одноименной рабочей группы, достигла статуса предложенной рекомендации (предфинального). А рабочая группа CSS выпустила целую серию спецификаций, в т.ч. довольно интересных.

Анахроничная борода: новая методология разработки сайтов для любых устройств и платформ

Перевод статьи Anachronistic Beard: a new methodology to make sites work anywhere с сайта brucelawson.co.uk, опубликовано на css-live.ru с разрешения автора — Брюса Лоусона.

(Пустая темная сцена. В центре — круг света от единственного прожектора. Из темноты выходит Брюс, в черной водолазке)

Ребята, вы готовы? (в зале возгласы и визги, как на презентациях Apple)

Ребята, вы ГОТОВЫ? (крики «Дааа!» и «Воистину!»)

Вы готовы к тому, что у вас ПЕРЕВЕРНУТСЯ ОСНОВЫ? (зрители массово падают в обморок от волнения)

Хотите ли вы, чтобы ваши сайты работали ВЕЗДЕ? (в зале уже не осталось ни одного сухого кресла)

Сегодня мы представляем супермегановейшую, переворачивающую основы методологию разработки под названием…

Анахроничная борода.

beard

Лакомые кускочки Grid-раскладки, часть 3: размеры грид-полос

Перевод статьи Grid Tidbits part 3: grid track sizing с сайта thatemil.com, опубликовано на css-live.ru с разрешения автора — Эмиля Бьёрклунда (твиттер — @ThatEmil).

В этой заметке исследуются некоторые тонкости задания размеров грид-полос (иначе — рядов и колонок) в CSS Grid Layout. Гибкие размеры, функция повторения, функция minmax — вот это да!

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

Чтобы экспериментировать с примерами из этой заметки, рекомендую скачать и запустить Chrome Canary, поскольку в этом браузере самая актуальная реализация.

CSS-функция element()

Перевод статьи CSS element() function с сайта iamvdo.me, с разрешения автора — Венсана де Оливейры.

В июле я написал про продвинутые приемы работы с CSS-фильтрами, в частности, backdrop-filter и filter(). Сегодня я хочу поделиться намного более потрясающей возможностью CSS. Но прежде чем начать, хочу предупредить: она работает только в Firefox, другие браузеры пока не торопятся ее поддерживать. Может быть, скоро это изменится. Очень на это рассчитываю. Так что прочитайте и передайте другим.

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

element()

WebKit (Safari 9) включил поддержку CSS-селекторов 4 уровня

В блоге разработчиков Safari опубликована статья о новых CSS-селекторах, поддерживаемых в последних сборках WebKit (в т.ч. в Safari 9). Речь идет о новом функциональном псевдоклассе :matches(), а также расширении функциональных псевдоклассов :not(), :nth-child() и :nth-last-child().

Селектор :matches() позволяет удобно группировать и более компактно записывать похожие селекторы (напр. .syntax-highlighted :matches(.css-tag, .css-keyword) вместо .syntax-highlighted .css-tag, .syntax-highlighted .css-keyword). Селектор :not() теперь тоже может содержать список селекторов (модуль селекторов 3 уровня разрешал ему лишь простой селектор, т.е. один тег, класс, псевдокласс или ID).

CSS Grid Layout — на финишной прямой

На прошлой неделе Рабочая группа CSS в W3C объявила о намерении уже этой осенью перевести спецификацию CSS Grid Layout 1 в статус кандидата в рекомендации — т.е. фактически стандарта, полностью готового к реализации без префиксов и флагов. Все оставшиеся непроработанными спорные моменты нужно «утрясти» не больше чем за месяц. Поэтому Рабочая группа CSS призывает всех интересующихся поскорее ознакомиться с текущим вариантом и поучаствовать в его обсуждении.

…Мы хотим, чтобы все были довольны, но этого не получится, если вы начнете жаловаться после того, как мы закончим и все уже выпустят свои реализации, а вы соблаговолите сказать нам, что вам что-то не нравится, лишь через пару лет, так ведь? Так что посмотрите сейчас, и лучше жалуйтесь раньше, а не позже. :)

В числе моментов, которые особенно важно обсудить сейчас — свойства row-gap и column-gap и их влияние на общую ширину грид-полос, уточнение автоматического определения размера полос, добавление возможности распределения контента по аналогии с флексбоксами, а также масса небольших уточнений. Всё это нужно прояснить и проработать до осени! Особенно значимы для W3C комментарии от веб-разработчиков — ведь именно им в первую очередь нужен двумерный механизм раскладки. Так что, если не хотите терпеть неудобства от стандарта потом, скорее знакомьтесь с текущей версией (напр. по статьям на нашем сайте), смело экспериментируйте с ней и помогите сделать стандарт удобным!

О моратории на новые браузерные функции, предложенном PPK

Перевод статьи On PPK’s moratorium on new browser features с сайта https://dev.opera.com/, с разрешения автора — Брюса Лоусона

Знаменитый разработчик и автор множества статей Питер Пол Кох (PPK) недавно призвал к «мораторию на новые браузерные функции на год или около того». Если вы не читали его статью «Хватит толкать веб вперед», просмотрите ее: он выдвигает интересные тезисы, как всегда.

Как стать выдающимся фронтенд-разработчиком

Перевод статьи How to Become a Great Front-End Engineer с сайта philipwalton.com, c разрешения автора— Филипа Уолтона.

Недавно я получил электронное письмо от читателя моего блога, которое почему-то заставило меня всерьез задуматься. Вот что оно гласило:

Привет, Филип, можно спросить, как вы стали выдающимся фронтенд-разработчиком?

Что-нибудь посоветуете?

Хватит толкать веб вперед

Перевод статьи Stop pushing the web forward с сайта www.quirksmode.org, c разрешения автора — Питера Пола Коха.

Честное предупреждение. Вам это очень не понравится. Я хочу временно прекратить толкать веб вперед. Я хочу моратория на новые браузерные штучки на год или около того.

С недавних пор я в глубоких сомнениях по поводу всего этого подталкивания веба вперед. Зачем толкать его вперед? И вперед к чему именно? Нужен ли нам такой веб, к чему мы его толкаем? Вам не доводилось слышать эти вопросы.

«Толкать веб вперед» сейчас означает набивать его всё новыми копиями нативной функциональности с головокружительной скоростью — интересными штуками, возразите вы, но их просто слишком много.

Ну-ка, назовите сходу все новые функции, выпущенные браузерами в 2015! Видите? Не можете. В этом-то и проблема.

Мы получаем всё больше функций, которые становятся всё сложнее и требуют для работы всё больше полифилов и др. инструментов — инструментов, являющихся частью проблемы, а не ее решения.

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

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

CSS Snapshot 2015 — официальное определение современного CSS

В недрах Рабочей группы CSS в W3C зреет маленькая сенсация: есть шанс, что в ближайшее время вместо безнадежно устаревшего документа пятилетней давности мы получим новое, актуальное официальное определение CSS! Хотя в самом документе в качестве основной аудитории указаны разработчики браузеров, веб-разработчикам тоже не помешает знание, какие спецификации CSS сами их авторы считают «готовыми» и годными для реализации, а какие — «сырыми» и экспериментальными.

Вот что официально входит в CSS образца 2015 года, по редакторскому черновику нового документа: