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

Руководство по флексбоксам и гридам для дизайнеров

Перевод статьи Designer’s Guide to Flexbox and Grid с сайта medium.com для CSS-live.ru, автор — Джон Яблонски

1-2gYOUyliCLRFMKMZMU1Leg

Что надо знать дизайнерам про эти раскладочные инструменты и перемены, которые они несут

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

(далее…)

Новый рабочий процесс W3C в действии: прощайте, старые (X)HTML!

HTML5 с плашкой устаревшей рекомендации

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

(далее…)

Модуль CSS-изоляции (CSS Containment Level 1) стал кандидатом в рекомендации

CSS containment CR

Еще один модуль CSS, о котором мы рассказывали, незаметно дозрел до статуса, с которого W3C советует начинать повседневное использование новинок.

Свойство contain позволяет ограничивать изменения дерева отрисовки, перерисовку CSS-боксов и изменения их размеров в пределах элемента. Поэтому оно так важно для динамичных интерфейсов и компонентного веба, позволяя оптимизировать отдельные компоненты и интерфейсы в целом. Но, как и любую оптимизацию, новинку нельзя применять бездумно, всегда тестируйте производительность с разными значениями этого свойства и выбирайте по лучшему практическому результату. Работает пока только в Blink-браузерах (Хроме и «хромятах»), в Firefox в разработке (частично работает за флагом).

Свойства для интервалов (*-gap) становятся универсальными

paris-column-gap

Из Парижа (на фото), где недавно проходила встреча рабочей группы CSS, прилетела занятная новость: свойства grid-row-gap и grid-column-gap, а также их сокращение grid-gap…

(далее…)

Вёрстка реальных проектов на гридах (CSS Grid Layout) уже сейчас

Перевод статьи Building Production-Ready CSS Grid Layouts Today с сайта smashingmagazine.com для CSS-live.ru, автор — Мортен Рэнд-Хедриксен

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

Сегодня мы в самом начале такой вот революции, которую несут с собой CSS-гриды. Многое из того, что мы знали о возможностях, ограничениях и общепризнанных подходах, с этим новым раскладочным модулем станет неактуальным, а взамен мы найдем новые возможности, ограничения и удачные решения, которые приведут нас в новую эру веб-дизайна.

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

Я буду рассматривать и приводить примеры для тем WordPress, но практические подходы и примеры универсальны и их можно использовать в любом веб-проекте, независимо от CMS, стека технологий или инструмента.

Приступим!

(далее…)

Свойства для выравнивания всего и новинки Display «повзрослели» на релиз

2modules

На прошлой неделе рабочая группа CSS опубликовала обновленные версии двух важных модулей CSS 3 уровня — Box Alignment и CSS Display. Статус у них пока прежний (черновик), но по планам редакторов следующая версия должна стать кандидатом в рекомендации — в общем, «почти готово». А буквально через день обновился еще один черновик — CSS Motion Path 1 уровня.

(далее…)

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

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

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

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

HTML, CSS, JS

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

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

(далее…)

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

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

0-pkfyT6WJt5lNNKkH

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

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

(далее…)

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

ms-grid

Радостная новость от 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

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

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

(далее…)

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

css5

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

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

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

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

pic

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

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

(далее…)