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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если вы освоили флексбоксы (а кто не освоил их за последние два-три года?), для вас давно не проблема отцентрировать что угодно, да и вообще выровнять как угодно. Вам давно знакомы «волшебные» свойства 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-гриды пришли насовсем

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

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

Проблема выбора структуры документа

Перевод статьи «The Document Outline Dilemma» с сайта css-tricks.com, опубликовано на css-live.ru с разрешения автора — Амелии Беллами-Ройдз

В последние несколько недель среди веб-стандартистов было много разговоров о HTML-заголовках. Возможно, вы видели какие-то записи в блогах, твиты и обсуждения разных ишью на Гитхабе. Заголовки — часть HTML начиная с самых первых сайтов в ЦЕРНе, так что может показаться странным, что спустя 25 лет в них нашлись какие-то противоречия. Я хочу сначала вкратце рассказать, почему это всё еще стоит обсуждения, а потом добавить собственные соображения по теме. Если вы сами следили за недавней дискуссией, можете перейти сразу к разделу «Более важная дилемма».

Грид + флексбокс: мощнейшее комбо в веб-раскладке

Перевод статьи Grid + Flexbox: the best 1-2 punch in web layout с сайта www.chenhuijing.com, опубликован на CSS-live.ru с разрешения автора — Чэнь Хуэй Цзин

Через 5 дней выходит стабильный релиз Firefox 52. Знаете, что это значит? Это значит, что через 5 дней начнут поддерживаться CSS-гриды. А совсем скоро, 14 марта, подтянется Chrome 57, за ним Safari 10.1 и, надеемся, до конца 2017-го присоединится и Edge.

Я вся в предвкушении.

W3C обновляет свой рабочий процесс

С 1 марта 2017 года у W3C обновился главный документ, регламентирующий работу над всеми спецификациями: W3C Process.

Главное отличие новой версии от предыдущей, принятой 1 сентября 2015-го — добавлена явная возможность помечать спецификации как устаревшие или отмененные. До сих пор по виду спецификации (особенно со статусом «Рекомендация») было непонятно, актуальна ли она до сих пор или вместо нее действует более новая (напр. HTML4.01 и HTML5.0, на смену которым пришла HTML5.1, но поисковики по-прежнему выдают ссылки на них как на актуальные спецификации!). По новому процессу такие устаревшие документы будут снабжаться специальной пометкой, что они больше не являются «руководствами к действию» и хранятся исключительно для истории и для нужд юристов-патентоведов.

Процедура внесения изменений в спецификацию тоже упрощена. Если раньше для выхода новой редакции спецификации требовалось «прогнать» ее через полный цикл черновиков и обсуждений, а до той поры изменения — включая существенные — приходилось публиковать на отдельной страничке «исправленные ошибки» (errata), то теперь изменения, не меняющие критериев соответствия спецификации (напр. дополнительные разъяснения сложных моментов) можно публиковать сразу. А для более серьезных изменений новая версия должна пройти только одну дополнительную стадию — кандидата в рекомендации, после утверждения она станет «Отредактированной рекомендацией» (Edited recommendation).

Надеемся, что с новым процессом разбираться в хитросплетениях спецификаций и их развития станет проще!