CSS-live.ru

SelenIT: статьи и переводы

Первый публичный черновик модуля CSS-шрифтов 4 уровня

1

11 июля рабочая группа CSS опубликовала первый публичный черновик модуля CSS-шрифтов 4 уровня. То есть это уже не сырая идея, а осязаемый и обсуждаемый проект, и разработчики браузеров уже могут вовсю экспериментировать с его новинками.

Их немало: управление отображением шрифта при загрузке (варианты на выбор — сразу отобразить текст шрифтом по умолчанию, а после загрузки шрифта подменить, не отображать текст первых 3 секунды загрузки шрифта, либо оставить шрифт по умолчанию, если не удалось загрузить шрифт быстро/моментально), причем для каждого шрифта это можно задавать отдельно, выбор угла наклона для наклонного шрифта, ограничение максимального и минимального размера шрифта, унификация размеров букв из разных шрифтов и многое другое, вплоть до многоцветных шрифтов и управления их палитрой. Так что стоит взглянуть. Тем более что некторые новинки (например, font-display, о котором упоминалось в статье Зака Лезермана о загрузке шрифтов, которая у нас переведена) уже работают в браузерах!

Июньские новинки мира веб-стандартов

0
HTML, CSS, JS

Последняя неделя июня выдалась урожайной на новости для всех трех «китов» фронтенда — HTML, CSS и JS.

Самое заметное событие именно в мире JS: комитет TC39 утвердил спецификацию ECMAScript 2017 (она же 8-я редакция ECMA-262). Понятно, что формальный статус стандарта не так важен, как поддержка в браузерах и инструментах, но то, что это уже стандарт, а не «какой-то черновик», для кого-то может быть важно. Основные новинки — уже полюбившийся многим async и первое стандартное средство для «распараллеливания» задач между основным потоком и воркерами (SharedArrayBuffer). И по мелочи — методы padStart и padEnd для строк, новые методы для объектов и т.п.

От бутстрапа — к CSS-гридам

12

Перевод статьи Bootstrap to CSS Grid с сайта medium.com для CSS-live.ru, автор — Наталия Шелберн

0-pkfyT6WJt5lNNKkH

«У меня пока нет возможности использовать CSS Grid»

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

Новые гриды уже в Edge Insider Preview

7

Радостная новость от Microsoft: буквально несколько часов назад статус самого, наверное, популярного запроса к разработчикам Edge — обновить реализацию CSS-гридов до соответствия актуальной спецификации — сменился с «В разработке» на «Доступен в превью» (конкретно, в Windows 10 Insider Preview build 16226). Пока за флагом, но зато уже без префикса.

Темп, с которым браузеры — даже традиционно «неторопливые» — подхватывают это долгожданное нововведение, безумно радует. Есть все шансы, что к концу года гриды действительно станут повсеместными (кроме, возможно, совсем старых андроидов, которым в любом случае лучше давать упрощенную мобильную раскладку). Так что спешите осваивать все возможности новой эры верстки!

Большая статья про гриды (CSS Grid Layout)

62

Мы давно изучали CSS-гриды, сами и вместе с зарубежными авторами. Тогда же возникла мысль оформить результат в виде подробного руководства по ним, вроде этого по флексбоксам. Это оказалось не так-то просто: стандарт большой, вводит множество новых понятий, к тому же эти понятия переплетены друг с другом, совсем как полосы самих гридов (как показать грид-области без привязанных к ним грид-элементов, и наоборот?). Поэтому работа над статьей, скажем прямо, несколько затянулась:) Но теперь, когда грид-раскладка уже поддерживается почти повсеместно (Firefox 52+, Chrome 57+, Opera 44+, Safari 10.1+/iOS 10.3+ Safari, Яндекс-Браузер 17+, а также в Android WebView), мы рады представить вам результат трудов. Надеемся, он поможет разобраться в горах новых возможностей. Это не «полное руководство» (полностью описать все возможности CSS Grid в одной статье просто нереально!), но мы постарались упомянуть некоторые важные моменты, упущенные многими из «полных руководств». Любые дополнения и уточнения приветствуются!

Как работает функция minmax()

7

Перевод статьи How the minmax() Function Works с сайта bitsofco.de, опубликовано на css-live.ru с разрешения автора — Ире Адеринокун.

Одна из невероятно полезных новинок спецификации CSS Grid Layout — функция minmax(). Эта функция открывает нам возможность писать более мощный и лаконичный CSS, позволяя задавать в качестве значения для грид-полосы функцию, включающую и минимальное, и максимальное значения.

Парадоксы display:contents и будущее текста в CSS

13

Внимание: информации, которую вы найдете в этой статье, нет ни на одном зарубежном ресурсе (upd.: за исключением перевода самой этой статьи на английский, спасибо raaly123). Больше того: в самих спецификациях она еще далеко не вся! Сами участники рабочей группы CSS всё еще чешут в затылках, решая, что же именно туда написать. Может показаться, что речь о каких-то теоретических, умозрительных планах на дальнее будущее, не связанных с браузерной реальностью — но нет: то, о чем пойдет речь, работает как минимум в двух браузерах (и даже более-менее единообразно).

Заинтригованы? Если да — добро пожаловать в статью и узнайте, как вроде бы пустяк, о котором сразу не подумали, едва не перевернул вверх дном одно из базовых понятий CSS. Впрочем, в любом случае заходите, если что, похвастаетесь «тайным знанием» перед коллегами, которые статью не читали:)

Первый черновик CSS 5 уровня

0

Если к модулям CSS 4 уровня мы уже привыкли, то 5 уровень (так и хочется назвать его «CSS5», хоть это и неправильно) — еще новинка. Но один такой модуль уже есть! Пока только в виде редакторского черновика, но всё же. Им стал модуль медиавыражений 5 уровня.

По сравнению с модулем медиавыражений 4 уровня (тоже еще не утвержден, но текущая опубликованная редакция выглядит достаточно зрелой) новинка позволит проверять из CSS, доступны ли скрипты (причем отдельно для момента загрузки страницы и для произвольного момента, что не по силам обычному <noscript>), узнавать уровень внешней освещенности, если устройство имеет соответсвующий датчик (напр. чтобы сделать интерфейс на экране мобильника максимально контрастным на ярком солнце и «приглушить» его в темноте), а также узнавать, надо ли показывать все анимации или лучше по возможности их убрать (напр. для читалок на электронных чернилах). Возможно, этот список еще будет расширяться.

Так что с очередным «левел-апом», CSS!

Подарки от браузеров ко дню вебмастера

0

4 апреля (4.04), в неофициальный праздник всех, кто связан с веб-разработкой — «день вебмастера», сразу два браузера решили порадовать веб-разработчиков хорошими новостями.

Во-первых, еще накануне вечером разработчики Edge объявили, что работа над обновлением реализации CSS-гридов в нем уже идет! Более того, оказывается, всё это время они вовсе не сидели сложа руки, а вовсю участвовали в работе над самим стандартом (прояснение спорных моментов спецификации, создание тестов для нее…). В конце концов, именно с их легкой руки грид-раскладка вообще дошла до браузеров, так что можно понять, что им хочется в итоге выпустить свою реализацию в лучшем виде, как говорится, «с чувством, с толком, с расстановкой»

Важная веха: Android обошел Windows и стал платформой №1 в вебе

11

Интересную новость сегодня опубликовал сервис веб-статистики Statcounter. По его данным, в марте 2017 года глобальная доля пользователей с Android незначительно, но превысила долю пользователей с Windows (37.93% против 37.91% от общей суммы десктопных и мобильных ОС). То есть впервые с 1980-х гг. Windows уступила звание самой популярной платформы. При этом еще пять лет назад доля Android составляла всего 2.4%.

Месяц CSS-гридов: первые итоги

1

Март 2017-го года можно с полным правом назвать месяцем CSS-гридов, и не потому, что «астрологи объявили» (хотя мудрые люди действительно предсказывали это заранее:). Трудно вспомнить другой месяц в истории веба, в начале которого одну из самых долгожданных технологий верстки поддерживали бы (без флагов и т.п.) ноль браузеров, а в конце — целых четыре: с 7 марта — Firefox, с 14 — Chrome для десктопов, с 21 — Opera, а с 27 — Safari, десктопный и мобильный! Сhrome для Android с поддержкой CSS Grid вот-вот появится в Google Play, формально он тоже успел выйти в марте. Один Edge пока остался со своей старой и неактуальной реализацией (хотя именно Microsoft, надо отдать им должное, первым хоть как-то реализовал гриды в браузерах), но вряд ли его разработчики смогут отмахнуться от той кучи просьб обновить гриды, что пришла им за эти дни. Добавлено 03.04.2017: так и вышло — статус этого запроса сменился с «В ожидании» на «Мы работаем над этим»!

Неудивительно, что количество статей о CSS-гридах за этот месяц выросло во много раз. Ведь это больше не теоретические мечты, а практический инструмент. Почти во всех статьях рефреном звучит восторг от новых возможностей, которые открывает первый модуль CSS, предназначенный именно для раскладки всей страницы. А Юна Кравец — она и раньше могла удивить нестандартным взглядом на знакомые вещи — и вовсе посвятила ему целую любовную песню!

Красивое выравнивание блоков по резиновой сетке. По-новому

14

Почти пять лет назад на нашем сайте вышла статья о том, как выстроить некие однотипные блоки (товары в каталоге, фото в галерее…) по сетке, оптимально вписанной в доступное пространство. Сейчас она — одна из самых популярных на сайте, и число ее просмотров всё растет. Ведь актуальность задачи никуда не делась. Самое время вернуться к этой теме и раскрыть ее по-новому.

CSS Grid на практике: добавляем гриды к существующему дизайну

0

Перевод статьи Practical CSS Grid: Adding Grid to an Existing Design с сайта alistapart.com для css-live.ru. Автор — Эрик Мейер.

Понять и использовать CSS-гриды проще, чем может показаться. В день, когда вышел Firefox 52 с поддержкой гридов, я на радостях решил переделать основу раскладки моего личного сайта на гридах. И это был очень несложный процесс — пять минут, чтоб написать сами стили для грида, еще 15-20 ушло на отладку.

Свойства для выравнивания всего и их новые тайны

18

Если вы освоили флексбоксы (а кто не освоил их за последние два-три года?), для вас давно не проблема отцентрировать что угодно, да и вообще выровнять как угодно. Вам давно знакомы «волшебные» свойства justify-content, align-content, align-items и align-self, и что делает каждое из их значений (не обязательно помнить их все наизусть, ведь всегда можно подсмотреть в шпаргалке или наглядном справочнике:). Но всё ли вы знаете про эти свойства? Что если я скажу вам, что их могущество не ограничено флексбоксами? И что вы видели лишь часть их значений? И что самих этих свойств не 4, а в два с лишним раза больше? Если хотите овладеть всей их мощью, узнать, причем тут новомодная грид-раскладка (CSS Grid Layout), и вас не страшат дебри спецификаций — добро пожаловать в эту статью, где я покажу вам, насколько глубока кроличья нора W3C.

CSS-гриды упомянуты не случайно: лучше сразу вооружитесь одним из браузеров, где они уже работают (Firefox 52+, Chrome 57+, Opera 44+ или Safari 10.1+/iOS 10.3+ Safari), чтобы увидеть примеры во всем их блеске.

CSS-гриды пришли насовсем

0

Перевод статьи CSS Grid Layout is Here to Stay с сайта blogs.igalia.com, опубликовано на css-live.ru с разрешения автора — Мануэля Рего Касановаса.

О том, что стояло за разработкой CSS Grid Layout в Chromium/Blink и Safari/WebKit, которую вела Igalia при поддержке Bloomberg.