CSS

Еще раз про border-image

Хотя свойство border-image уже поддерживают более 96% браузеров (с оговорками, но всё же), популярным пока его не назовешь. Пожалуй, поначалу оно кажется неоправданно сложным: объединяет в себе 5 отдельных свойств, каждое с несколькими значениями, да еще неочевидные правила взаимодействия с обычным border — легко запутаться. Даже многие неплохие руководства (типа статьи Дадли Стори, которую мы переводили в прошлом году) грешат тем, что даже после них ощущение сложности не проходит.

Есть мнение, что его сложность преувеличена, а возможности недооценены. Попробуем исправить это упущение.

(далее…)

Пространство в системах дизайна

Перевод статьи Space in Design Systems с сайта https://medium.com, опубликовано на css-live.ru с разрешения автора — Нейтана Кёртиса.

1-1scyy1iu_z0nic9lnqhohg

От основ до продвинутых понятий, чтобы задействовать пространство с умом

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

(далее…)

Псевдоэлементы, которых не может быть

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

(далее…)

Руководство по цветам в вебе для «ботаников»

Перевод статьи A Nerd’s Guide to Color on the Web с сайта CSS-Tricks.com для CSS-live.ru, автор — Сара Дрэснер

Работать с цветами в вебе можно множеством способов. Думаю, полезно понимать механизмы того, с чем мы работаем, и цвет — не исключение. Давайте пороемся в некоторых технических подробностях цвета в вебе.

Цветосмешение

При работе с цветом очень важно понимать, что привычные еще с детства подходы к цветам не работают в компьютере из-за смешения цветов. В детстве мы работали с краской. В красках и чернилах из принтера есть маленькие частички — пигменты, которые смешиваются между собой и отражают свет, чтобы представить цвет глазу. Это субтрактивное (от англ. subtract — вычитание) цветосмешение. Чем больше цветов вы добавляете, тем темнее становится результат, пока не получится коричневый цвет. Основные цвета близки к тому, к чему вы привыкли: красный, желтый, синий. Но если смешать их при субтрактивном цветосмешении, вы придете к коричневому.

Субтрактивное цветосмешение пигментов

(далее…)

Анимации: ищем общий язык

Перевод статьи Communicating Animation с сайта alistapart.com для css-live.ru. Автор — Рэйчел Нейборс.

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

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

(далее…)

Полезные соображения насчет курсоров по умолчанию

Перевод статьи Some pointers on default cursors с сайта hiddedevries.nl, опубликовано на css-live.ru с разрешения автора — Хидде де Вриса

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

Это не пустяк: ссылки (<a/>) ведут куда-то ещё, кнопки — (<button>-ы) выполняют действия. «Палец» указывает пользователю, что его курсор находится на ссылке, которая перенаправит его куда-то. Причем ее можно открыть в другой вкладке: скопировать ссылку, перетащить её в другое окно, и так далее. Другим интерактивным элементам на странице (к примеру, кнопкам) достанется курсор по умолчанию. Краткая выжимка: палец не означает кликабельность.

(далее…)

Взаимодействие между Javascript и CSS с помощью CSS-переменных

Перевод статьи Communicating Between JavaScript and CSS Using CSS Variables с сайта eager.io, опубликовано на css-live.ru с разрешения автора — Зака Блума

На 2016 г. CSS-переменные полностью работоспособны в Chrome и Firefox, у IE тоже в планах реализовать их.

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

Что такое CSS-переменные?

(далее…)

CSS-изоляция

Перевод статьи CSS containment с сайта justmarkup.com, опубликовано на css-live.ru с разрешения автора — Майкла Шарнала

Я узнал про свойство contain всего несколько недель назад, когда в ответ на мой вопрос в твиттере о применениях медиазапросов для контейнера Дэвид Бэрон упомянул его, сказав, что с contain: strict; можно избежать множества теоретических проблем с медиазапросами для контейнера. С тех пор я читаю спецификацию, пытаясь понять это свойство, и вот что мне удалось выяснить.

(далее…)

Языки, чуть было не ставшие CSS

Перевод статьи The Languages Which Almost Became CSS с сайта eager.io, опубликовано на css-live.ru с разрешения автора — Зака Блума

Для меня оказалось поистине нескончаемым наслаждением весь прошлый год кряду отвечать полчищам (буквально) желающих — лучше сядьте и пристегнитесь, сейчас будет нечто — управлять внешним видом документов, как это элементарно делалось в TeX, Ворде и любом другом популярном редакторе: «Простите, но фигушки вам».

Марк Андрессен, 1994

Когда в 1991-м Тим Бернерс-Ли объявил о создании HTML, оформлять страницы было просто нечем. То, как отображались те или иные HTML-теги, определялось браузером, часто под существенным влиянием пользовательских настроек. Хотя казалось заманчивым придумать стандартный способ, чтобы странички сами «предлагали», в каком виде их лучше отобразить.

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

Хотя, очевидно, сейчас эти языки не в ходу, мое сердце замирает при мысли о том, как всё могло бы быть. И что еще удивительнее, оказывается, во многих из этих других вариантов было такое, что разработчики и сейчас прыгали бы от счастья, появись оно в CSS.

(далее…)

Исчерпывающее руководство по стратегиям загрузки веб-шрифтов

Перевод статьи A COMPREHENSIVE GUIDE TO FONT LOADING STRATEGIES с сайта zachleat.com, опубликовано на css-live.ru с разрешения автора — Зака Лезермана

Это руководство — не для шрифтовых иконок, у которых свои приоритеты загрузки и применения. К тому же, в долгосрочной перспективе, видимо, лучше сделать ставку на SVG.

Прим. перев.: в названиях методов Зак использует труднопереводимые сокращения FOIT, FOUT и FOFT:

  • FOIT (Flash of Invisible Text) — букв. «мелькание невидимого текста», когда во время загрузки веб-шрифта текст не отображается вообще;
  • FOUT (Flash of Unstyled Text) — букв. «мелькание неоформленного текста», когда во время загрузки веб-шрифта текст отображается шрифтом по умолчанию (напр. системным);
  • FOFT (Flash of Faux Text) — букв. «мелькание синтезированного текста», когда в промежутке между загрузкой основного веб-шрифта и его вариаций (жирный, курсив и т.д.) вместо этих вариаций браузер отображает особым образом измененный основной шрифт (так называемый «ложный жирный» и «ложный курсив», чуть подробнее о них здесь).

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

Перейти к:

(далее…)

Битва архитектур

Перевод статьи Battle of the architectures с сайта mariano.io, опубликовано на css-live.ru с разрешения автора — Мариано Мигеля.

Сравнение двух популярных подходов в CSS, и чем они меня не устраивают

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

  1. С одной стороны, есть «семантический» подход. Те, кто считает, что код должен быть как можно проще, утверждая, что методологии вроде БЭМ и OOCSS недостаточно хороши, поскольку не уделяют должного внимания семантике и доступности.
  2. С другой стороны, есть «атомный/функциональный» подход. Это те, кто возводит принцип единственной обязанности в абсолют, и штампуют сверхспециализированные служебные классы направо и налево, полностью наплевав при этом, за редкими исключениями, на читаемость и самодокументируемость кода.

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

(далее…)

Относитесь к сеткам (на флексбоксах) проще

Перевод статьи Don’t Overthink It (Flexbox) Grids с сайта css-tricks.com, опубликовано на css-live.ru, автор — Крис Койер.

Четыре года назад вышла моя статья «Относитесь к сеткам проще», собравшая немало откликов. Уже тогда мне казалось, что мы находимся на пике популярности сеток. Каждую неделю кто-нибудь рекламировал очередной фреймворк для сеток.

Посыл статьи был такой: «Не бойтесь! Сетки можно создавать и самому! В сложном фреймворке нет необходимости». Возможно, это было не так уж радужно, но вот такой уж тезис я выкатил. Вы задаете float и ширину в процентах паре элементов и баста.

(далее…)

CSS Grid Layout и позиционированные элементы

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

В этой статье мы рассмотрим некоторые особенные возможности позиционированных грид-элементов.

В рамках работы Igalia над CSS Grid Layout в Chromium/Blink и Safari/WebKit, мы реализовали поддержку позиционированных элементов. Да, абсолютное позиционирование в гриде :)

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

(далее…)

Семантический CSS

Перевод статьи Semantic CSS с сайта snook.ca, опубликовано на css-live.ru с разрешения автора — Джонатана Снука.

Подзаголовок: почему все, кто говорит о важности семантики —  правы и неправы одновременно.

Я часто слышу про семантический CSS. Что ID и классам нужно давать осмысленные имена.

Видимо, люди неявно полагают, что слово «семантический» говорит само за себя. Но на практике это не всегда так. Конечно, можно сделать умный вид и согласиться с тем, что, например, класс «.products» семантический.

Так что же люди подразумевают под семантическими названиями классов. Как правило, эти названия должны описывать содержимое элементов.

(далее…)

Регрессивные веб-приложения

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

На конференции Google I/O в этом году было немало докладов о разработке для веба. Приятная перемена по сравнению с прошлыми годами, когда о вебе едва вспоминали и можно было скорей подумать, что  Google I/O — конференция для разработчиков приложений под Андроид.

Последняя конференция показала, что Гугл очень большой и у него нет какой-то единой генеральной линии по поводу веба и нативных приложений. Хотя были доклады о сервис-воркерах и производительности для веба, были также представлены «Мгновенные Андроид-приложения» — неприкрытая атака на веб. Если вас раздражало, что сайты назойливо тыкали вам под нос всплывающие окошки с предложением установить их приложения, то подождите, скоро они смогут и не спрашивать.

(далее…)