Архив автора: Максим Усачев

Краткий обзор «object-fit» и «object-position»

Перевод статьи A Quick Overview of `object-fit` and `object-position с сайта css-tricks.com для css-live.ru. Автор — Роберт Рендли.

Последнее время object-fit и object-position — мои любимые CSS-свойства. С ними разработчики могут управлять содержимым внутри img или video, подобно манипулированию содержимым background с помощью background-position и background-size.

Для начала, подробнее про object-fit

(далее…)

Управление загрузкой CSS с помощью пользовательских свойств

Перевод статьи Control CSS loading with custom properties с сайта jakearchibald.com, опубликовано на css-live.ru, автор — Джейк Арчибальд.

На прошлой неделе я писал о простом методе постепенной загрузки CSS, и в этот же день учёные заставили гравитацию поволноваться. Совпадение? Не иначе.

Паттерн из предыдущей статьи охватывал 90% случаев многоэтапной загрузки CSS, и его простота вполне очевидна. Но не угодно ли вам послушать про паттерн, который подходит к ~100% случаев и при этом до нелепого сложен? Тогда приглашаю вас пройти вместе со мной в следующий абзац…

(далее…)

Мысли вслух о подсетках в CSS Grid Layout

Перевод статьи Subgrids thinking out loud с сайта blogs.igalia.com, опубликовано на css-live.ru с разрешения автора — Мануэля Рего Касановаса.

Итоги наших размышлений о функции подсеток из спецификации CSS Grid Layout.

За последние недели подсетки стали острой темой, в основном из-за статьи «Подсетки в Grid Layout жизненно важны» Эрика Мэйера (кстати, первод есть у нас на сайте — прим. перев.), в которой он привёл несколько примеров того, где подсетки могут оказаться весьма кстати. Эти примеры так или иначе связаны с предыдущей статьёй fantasai на эту же тему. К тому же Рэйчел Эндрю рассказывала про подсетки в своём блоге и в своей последней электронной книге про Grid Layout (что вполне достаточно, чтобы получить представление о синтаксисе и основных функциях грида).

Возможно вы в курсе, что последнее время Igalia работает над реализацией CSS Grid Layout в Chromium/Blink и Safari/WebKit. Как разработчики, мы решили, что неплохо будет поделиться нашим откликом на эту тему, так что на этой неделе команда, работающая над Grid Layout (Серхио, Хави и я) договорились о встрече для рассмотрения функции подсеток. Вот наши первые соображения об этом и первое черновое предложение насчет возможной реализации.

(далее…)

ES6: объекты WeakMap, Set и WeakSet изнутри

Перевод статьи ES6 WeakMaps, Sets, and WeakSets in Depth с сайта ponyfoo.com, опубликовано на css-live.ru с разрешения автора — Николаса Беваквы.

Встречайте очередную часть «ES6 — это уже невыносимо — изнутри». Вы здесь впервые? Тогда начните с краткой историей инструментария ES6. Затем изучите деструктирование, литералы шаблона, стрелочные функции, оператор расширения и оставшиеся параметры, улучшения в литералах объекта, новый «сахарок» — классы поверх прототипов, let, const и «Временную мёртвую зону», а такжеитераторы игенераторы и символы и объекты Map. Ну а этим утром мы обсудим ещё три структуры данных для коллекций, новинки в ES6: объекты WeakMap, Set, и WeakSet.

(далее…)

ES6: Методы объекта Map изнутри

Перевод статьи ES6 Maps in Depth с сайта ponyfoo.com, опубликовано на css-live.ru с разрешения автора — Николаса Беваквы.

Привет, это «ES6 — ну сколько можно уже — изнутри». Вы здесь впервые? Тогда начните с краткой истории инструментария ES6. Затем изучите деструктирование, литералы шаблона, стрелочные функции, оператор расширения и оставшиеся параметры, улучшения в литералах объекта, новый «сахарок» — классы поверх прототипов, let, const и «Временную мёртвую зону», а также итераторы и генераторы и символы. Ну а сегодня поговорим про новую структуру данных для коллекций в ES6, новой фичи в ES6 — я говорю про объект Map.

(далее…)

ES6: символы изнутри

Перевод статьи ES6 Symbols in Depth с сайта ponyfoo.com, опубликовано на css-live.ru с разрешения автора — Николаса Беваквы.

Приветствую! Милости просим в «ES6 — надо же, еще один выпуск — изнутри». Если не представляете, как тут очутились или вообще что такое ES6, рекомендую ознакомиться с краткой историей инструментария ES6. Затем изучить деструктирование, литералы шаблона, стрелочные функции, оператор расширения и оставшиеся параметры, улучшения в литералах объекта, новый «сахарок» — классы поверх прототипов, let, const и «Временную мёртвую зону», а также итераторы и генераторы. Ну а сегодня поговорим о символах.

(далее…)

Еще раз о плавающей метке на CSS

Перевод статьи Revisiting the Float Label pattern with CSS с сайта thatemil.com, опубликовано на css-live.ru с разрешения автора — Эмиля Бьёрклунда (твиттер — @ThatEmil).

Паттерн с «плавающей» меткой — нехитрый паттерн, полюбившийся разработчиками. Не скажу, что сам влюблён в него на 100%, но не смог удержаться и не состряпать быструю демо-реализацию. В этой версии используются несколько приятных трюков для стилизации формы, повстречавшихся мне в последнее время, в частности селектор :placeholder-shown.

Первым делом: это ни в коем случае не готовое практическое решение. Она работает в последних версиях некоторых браузеров — прежде всего в Chrome/Opera и Safari/WebKit. А вот в Firefox с треском проваливается. И учтите, что я не тестировал его как следует.

(далее…)

Золотая рыбка CSS3 Grid Layout (часть 3)

Благодаря нашим недавним погружениям в волшебный мир этого модуля, мы уже смогли прочувствовать его силу и невероятные возможности, которыми он наделён. Но, несмотря на множество примеров и описаний разделов CSS Grid Layout Module Level 1, есть ещё немало сюрпризов, о которых стоит поговорить. Поэтому, как вы уже догадались, в этой статье мы продолжим прогулку по этой спецификации, ведь золотая рыбка задолжала нам ещё желания;)

Кстати, так совпало, что параллельно с нами Эмиль Бьёрклунд также ведёт свою серию статей, посвящённую спецификации Grid Layout. Поэтому, чтобы лучше прояснить для себя механизм этой раскладки, мы настоятельно рекомендуем ознакомиться со статьями Эмиля. Для этого можно пройти к нему в гости, либо прочитать перевод у нас на сайте.

Пожалуй, начнём…

(далее…)

Минимально необходимые шрифты

Перевод статьи CRITICAL WEB FONTS с сайта zachleat.com, опубликовано на css-live.ru с разрешения автора — Зака Лезермана.

История загрузки веб-шрифтов проходила через много этапов:

  1. Не делать ничего: подключение CSS-блока @font-face и использование его у себя в коде без уточнений. Но по мне, так это антипаттерн. Это приводит к мельканию невидимого текста (англ. flash of invisible text — FOIT) в некоторых браузерах, или того хуже, если что-то пойдет не так, в браузерах без таймаута на загрузку шрифта (WebKit) текст вообще так и не появится.
  2. Встраивание шрифтов с помощью Data URI для мелькания неоформленного текста (англ. flash of unstyled text — FOUT): загрузка таблицы стилей CSS асинхронно (или с помощью AJAX-запроса) с веб-шрифтами, встроенными как Data URI (и сохранение их в localStorage для повторных показов).  Этот подход устарел, поскольку может вызвать краткое мелькание невидимого текста (FOIT) на некоторых маломощных устройствах.
  3. Динамический класс для мелькания неоформленного текста: использовать API загрузки CSS-шрифтов (или полифилл для той же цели, вроде FontFaceOnload или fontfaceobserver), чтобы добавить класс-ограничитель, защищающий наш контент от веб-шрифтов до того, как они загрузятся (это также подробно описано на «Filament Group Lab«). Это необходимый минимум того, что я могу признать передовым методом, или «Введение в основы загрузки шрифтов».
  4. Два динамических класса для мелькания ложного жирного и ложного курсива (англ. flash of faux text — FOFT): Этот метод немного усложняет процесс и использует два разных этапа динамических классов. На первом этапе загружается только обычный шрифт, затем все другие варианты — жирный, курсив и жирный курсив — загружаются на втором этапе. Это замечательно для медленных соединений тем, что основная масса перерасчетов страницы происходит на поздних этапах ее загрузки, где они не так заметны и меньше мешают пользователям. Я бы классифицировал этот подход, как «Средняя школа загрузки шрифтов».

(далее…)

Подсетки в Grid Layout жизненно важны

Перевод статьи Subgrids Considered Essential с сайта meyerweb.com для css-live.ru. Автор — Эрик Мейер.

Модуль Grid layout — невероятно фантастическая штука. Я познакомился с ним подробно во время написания главы про грид-раскладку в четвёртом издании своей книги «CSS: полное руководство», и он позволяет вытворять с раскладками такое, что нам даже не снилось. И, кажется, я понял одну недостающую деталь — мощь и необходимость подсеток.

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

(далее…)

О режимах наложения в CSS без тайн

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

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

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

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

(далее…)

Фокус (и стили) по клику на SVG-элементе

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

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

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

(далее…)

flex-grow странный. Так ли это?

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

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

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

(далее…)

Классный CSS: подход к таблицам стилей Sass как к программе

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

Я начала писать этот пост через несколько недель после выхода полусатирической статьи на Sitepoint с моим взглядом на смесь нынешних тенденций систем наименования и организации CSS, под названием «Атомный OOBEMITSCSS». Это было ещё в августе, но на меня навалилось много дел. Я назвала её «Атомный OOBEMITSCSS» в шутку, но люди начали применять это название и использовать его в реальных проектах (что, если честно, было довольно забавно, поскольку при встрече меня стали засыпать вопросами об этом). Споры за и против использования @extend на SassConf в этом году (и в Twitter в последнее время) напомнили мне об этой идее.

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

(далее…)

ES6: генераторы изнутри

Перевод статьи ES6 Generators in Depth с сайта ponyfoo.com, опубликовано на css-live.ru с разрешения автора — Николаса Беваквы.

Это «ES6 изнутри», самая продолжительная серия статей в истории Pony Foo! ES5 уже надоел? Тогда приветствую! Для начала давайте поговорим про деструктирование, литералы шаблона, стрелочные функции, оператор расширения и оставшиеся параметры, улучшения в литералах объекта, новый «сахарок» — классы поверх прототипов, let, const и «Временную мёртвую зону», а также итераторы.

Как и в прошлых статьях, рекомендую вам установить Babel и повторять за мной, копируя примеры с помощью интерактивной оболочки REPL, либо командной строки babel-node и файла. Это поможет гораздо лучше усвоить идеи, обсуждаемые в серии. Если вы не из тех, кто любит устанавливать что-либо на свой компьютер, то вам есть смысл залезть на CodePen и кликнуть иконку с шестерёнкой для JavaScript — у него есть препроцессор Babel, который с лёгкостью позволяет опробовать ES6. Ещё одна довольно полезная альтернатива, это использовать онлайновый REPL для Babel — он показывает скомпилированный ES5-код справа от ES6-кода, чтобы быстро сравнить.

Пока мы не начали, позвольте беззастенчиво попросить вашей поддержки, если вы наслаждаетесь моей серией «ES6 изнутри». Ваши взносы пойдут на хостинг сайту, мне на еду, на то, чтоб я не отставал от графика, и на то, чтобы Pony Foo оставался поистине источником джаваскриптовых вкусняшек.

Спасибо, что выслушали, а теперь перейдём к генераторам! Если вы ещё не прочитали вчерашнюю статью про итераторы, то следует сделать это, поскольку сегодняшняя статья во многом на нее опирается.

(далее…)