Последние записи

Материальный дизайн

Перевод официальной спецификации Google для Material Design: http://www.google.com/design/spec/material-design/

Уже переведено 15 разделов:

Конические градиенты — уже сегодня!

Перевод статьи Conical gradients, today! с сайта lea.verou.me, автор — Лиа Веру.

Не секрет, что я люблю конические градиенты. Ещё в 2011 году я написала черновик для conical-gradient() в CSS, который помог Табу при добавлении их в «Изображения в качестве CSS-значений 4 уровня» в 2012-м, как он потом признался. Но спустя три года их даже не попытались реализовать. Конечно, спецификация еще довольно «сырая», но не из-за этого конические градиенты не получили поддержки. Бывали экспериментальные реализации и куда хуже описанных функций. Причина, по которой конические градиенты всё ещё не реализованы — мало разработчиков знают о них, поэтому браузеры не видят в них нужды.

Screen-Shot-2015-06-18-at-16.26.40-

(далее…)

Создание «In Pieces». Разработка интерактивной демонстрации при помощи контуров обрезки в CSS

Перевод статьи The Making Of “In Pieces”: Designing an Interactive Exhibition With CSS Clip Paths с сайта smashingmagazine.com, автор — Брайан Джеймс.

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

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

1-in-pieces-opt In Pieces: 30 видов, 30 кусочков.

(далее…)

Когда флексбоксы не всесильны, или сюрприз тёмной стороны CSS

Сегодня, когда флексбоксы поддерживаются в 93% браузеров, многие видят в них панацею для верстки. И неспроста: это первый модуль CSS специально для раскладки блоков, многие когда-то сложные задачи с ним решаются буквально парой строчек. Есть даже целая галерея таких решений (ее автор Филип Уолтон знаком нам по систематизации браузерных багов с флексбоксами). Кажется, что этой новой чудесной технологии подвластно всё. Так что легко понять недавнее удивление известного веб-дизайнера, разработчика и популяризатора Уэса Боса в твиттере:

Неужели это невозможно с флексбоксами? Как мне заставить флекс-элементы растягиваться, но выравнивать свой контент по вертикали? Вот код:

Казалось бы, элементарная задача. Всего одна строка флекс-элементов, в самих элементах ничего хитрого, обычное строчное содержимое. И по отдельности требования Уэса реализуются проще некуда. Вертикальное центрирование — одной строчкой кода: align-items:center. Растягивание блоков до одинаковой высоты — вообще без кода, это делает значение align-items:stretch по умолчанию. Одна проблема — свойство принимает лишь одно значение.

В длинном обсуждении твита решения так и не нашлось.

(далее…)

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

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

Возможно многие из вас уже задавали себе вопрос, что делает в названии статьи фраза «Золотая рыбка» и как это связано со спецификацией CSS Grid Layout? Дело в том, что по мере изучения этого модуля я пришёл к мнению, что это настолько мощный и невероятно гибкий механизм, что, как и золотая рыбка, он может выполнить любое ваше желание. Даже модный Flexbox не может похвастаться таким арсеналом.

Вот список некоторых возможностей этого модуля:

(далее…)

Когда <button> не лучший выбор (она медленнее создается, отображается и с трудом стилизуется)

Перевод статьи When <button> isn’t the best choice (it’s slow to create and render and problematic to style) с сайта benfrain.com, автор — Бен Фрейн.

Элемент <button> значительно медленнее при создании в JavaScript, он медленнее отображается в браузере и крайне трудно стилизуется кроссбраузерно. Несмотря на то, что <button>, это «правильный» выбор для задач кнопки, это не обязательно должен быть «лучший» выбор.

Представьте картину. Я пытаюсь убедить главного инженера программного обеспечения использовать более семантические элементы в разметке, а не только общие элементы, типа div  и span. Такие семантические элементы, как sectionheaderfooter и nav. Разговор выглядел примерно следующим образом. «Нам нужно проверить, что они не медленнее при создании в JavaScript», — говорит он. «Конечно, нет проблем», — отвечаю я, с полной уверенностью.

(далее…)

Игра на чистом CSS, без грязной HTML-разметки

За последних три-четыре года мы насмотрелись на столько примеров «чего-либо на чистом CSS», что порядком устали от этого словосочетания. Чаще всего это значит лишь «без скриптов» — т.е. с хаками в разметке, типа вставленных в строго определенные места невидимых чекбоксов. Отчего разметка становится нелогичной и негибкой. Так что «чистый CSS» почти всегда оборачивается «грязным HTML». Хейдон Пикеринг тоже настолько устал от этого, что высказался в твиттере:

Если вы заявляете, что сделали что-то на «чистом CSS», я даже видеть не хочу HTML. Удачи.

Многие читатели прицепились к фразе «видеть не хочу HTML» буквально. Действительно, хотя CSS-оформление привязано к DOM-элементам, CSS может работать и с минимумом HTML-разметки. А то и вообще без нее! Сразу несколько человек вспомнили старинный пример Матиаса Биненса. Он использует псевдоэлемент для элемента body (для которого необязательны и закрывающий, и открывающий теги, т.е. он присутствует в DOM независимо от наличия соотв. тегов в разметке!) плюс малоизвестный (и поддерживаемый пока только в Firefox и старой Опере) HTTP-заголовок Link, позволяющий браузеру ссылаться на файл стилей без тега <link>. Но сами комментаторы были вынуждены признать, что такой подход слишком ограничен, чтобы быть полезным.

Но кто ж готов мириться с ограничениями, тем более вечером в пятницу! Уж точно не ваш покорный слуга:). Вызов принят: что если не полезное, то по крайней мере интересное/занятное можно сделать в наши дни на чистом CSS, по возможности (в идеале — вообще) не используя разметку?

(далее…)

Трансформации для SVG-элементов

Перевод статьи Transforms on SVG Elements с сайта css-tricks.com, автор — Ана Тудор.

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

Как и HTML-элементами, SVG-элементами можно управлять при помощи функций для трансформации. Однако, далеко не всё работает с SVG-элементами так, как с HTML-элементами

Для начала, CSS-трансформации для SVG-элементов не работают в IE. Конечно, есть вариант с использованием SVG-атрибутов трансформации для IE, в случае, если нам нужно применять для наших элементов только 2D-трансформации.

(далее…)

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

Перевод статьи Easy Cross-Browser Text Masks with Blend Modes с сайта demosthenes.info, c разрешения автора — Дадли Стори.

Есть много способов делать маски обрезки по тексту (оформление графики или эффекты внутри букв) в вебе, но все эти техники какие-то бессистемные: Chrome и Safari уже давно поддерживают -webkit-background-clip:text;, но это касается только двух браузеров; есть также SVG-техники, но они тоже имеют ограничения.

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

(далее…)

Жизнь после CSS3: что нового в CSS… 1?

Будущее настало незаметно

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

(далее…)

Упорядочивание багов кроссбраузерности Flexbox

Перевод статьи Normalizing Cross-browser Flexbox Bugs с сайта philipwalton.com, c разрешения автора— Филипа Уолтона.

Обновлено: в качестве дополнения к этой статье я создал Github-репозиторий Flexbugs (перевод на css-live.ru): поддерживаемый сообществом список проблем с flexbox и кроссбраузерных обходных путей для них. Цель такова, что если вы разрабатываете сайт, используя flexbox, и при этом что-то работает не так, как вы ожидали, то здесь вы можете найти решение.

Давным-давно в сентябре 2013, при тестировании своего проекта «Решено при помощи Flexbox», я обнаружил баг в Internet Explorer 10 и 11, который не давал моему прижатому подвалу действительно прижаться к низу страницы. Я потратил некоторое время, пытаясь обойти эту проблему, но все мои попытки оказались тщетны.

(далее…)

Визуальное руководство по свойствам Flexbox из CSS3

Перевод статьи A Visual Guide to CSS3 Flexbox Properties с сайта scotch.io, c разрешения автора— Димитара Стоянова.

Раскладка Flexbox, официально названная CSS-модуль раскладки гибких боксов – новый раскладочный модуль в CSS3, созданный для улучшения выравнивания, направления и порядка элементов в контейнере, даже когда их размер неизвестен или меняется динамически. Основная характерная черта flex-контейнера — это способность изменять ширину или высоту своих дочерних элементов, чтобы как можно лучше заполнить доступную область на экранах разной ширины.

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

Вместо того, чтобы объяснять, как работают flex-свойства, это руководство сосредоточится на том, как flex-свойства влияют на раскладку визуально.

(далее…)

Про пояса HTML и подтяжки ARIA: неявная ARIA-семантика по умолчанию, которую от вас хотели скрыть

Перевод статьи Стива Фолкнера «On HTML belts and ARIA braces» с сайта html5doctor.com

Надо ли добавлять HTML-элементам атрибуты ARIA role, чтобы раскрыть их семантику — один из тех вопросов, что всплывают с завидным постоянством. Ответ — «может быть» для некоторой части элементов, но обычно (и чем дальше, тем больше) — «нет».

(далее…)

О «призраках» в CSS и борьбе с ними

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

Стандарт HTML5

Для спецификаций CSS этот совет актуален вдвойне: при каждом прочтении открывается очередная тайна. Как-то раз, расследуя детективную историю о пропавшем контексте форматирования, мы ненароком «открыли периодический закон» для свойства display. В этот раз мы столкнемся с мистикой.

…Они появляются из ниоткуда. Они бестелесны. Их не может поймать даже DOM-инспектор. Они своенравны: иногда они незримо приходят на помощь, но могут и довести до слез своими проказами. У них нет имени. Лишь немногие владеют тайной, позволяющей повелевать ими…

Сегодня вы тоже узнаете эту тайну. Но сначала давайте вызовем парочку их.

(далее…)

Браузерные баги Flexbox

Перевод материала из github-репозитория Flexbugs с разрешения его владельца — Филипа Уолтона.

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

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

(далее…)

Задача плотной упаковки блоков

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

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

(далее…)