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

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

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

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

Лакомые кусочки Grid-раскладки, часть 1: зачем и почему

Перевод статьи Grid tidbits, part 1: the Why and Where с сайта thatemil.com, автор — Эмиль Бьёрклунд (твиттер — @ThatEmil).

CSS Grid Layout — новый способ управления раскладкой в браузере. У него и других модулей (например, flexbox) разные возможности и перспективы, но в чем-то они и перекрываются. Да, и совсем скоро он появится во многих браузерах.  В этой статье мы узнаем, что это за модуль и для чего он нужен.

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

Статьи предполагают по крайней мере базовые знания CSS-раскладки, в том числе Flexbox.

(далее…)

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

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

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

(далее…)

10 способов уменьшить количество перекомпоновок и повысить производительность

Перевод статьи 10 Ways to Minimize Reflows and Improve Performance с сайта www.sitepoint.com, автор — Крейг Баклер.

Хотя веб-страницы достигают 2МБ, производительность остается острой темой. Чем шустрее ваше приложение, тем лучше пользовательский опыт и выше конверсия.

При этом я и сам не без греха по части добавления необдуманных CSS3-анимаций и манипулирования множеством DOM-элементов, не задумываясь о последствии. Если дело касается визуальных эффектов, то в «браузерном мире» есть два термина:

(далее…)

«Готов» ли HTML?

Перевод статьи Is HTML «complete»? с сайта brucelawson.co.uk, автор — Брюс Лоусон.

Не так давно Тим Брей написал интересный пост под названием </html>, в котором он заявляет:

Никто, похоже, не заинтересован в работе над «словарем» (под которым понимаются те штуковины в угловых скобках, из которых состоит HTML).

На мой взгляд, HTML готов. Это ни в коем случае не означает, что я считаю, будто вся платформа веб-программирования находится в надлежащем состоянии…

Давайте отложим инструменты и сосредоточимся на более важных проблемах.

(далее…)

Состояние дел с веб-компонентами

Перевод статьи The state of Web Components  с сайта hacks.mozilla.org, автор — Уилсон Пэйдж.

Веб-компоненты уже давно на примете у разработчиков. Впервые их предложил Алекс Рассел на конференции Fronteers 2011. Идея всколыхнула сообщество и стала темой многих последующих докладов и обсуждений.

В 2013 г. Google выпустил фреймворк на основе веб-компонентов под названием Polymer, чтобы опробовать эти новые API, собрать отклики сообщества и, приняв их во внимание, сделать «конфетку».

Теперь, 4 года спустя, веб-компонентам пора бы быть повсюду, но фактически лишь в Chrome реализована «какая-то их версия». Даже с учетом полифилов ясно, что сообщество не готово полностью принять веб-компоненты, пока они не начнут работать в большинстве браузеров.

(далее…)

Дебаты на тему «А нужен ли нам вообще CSS?»

Перевод статьи The Debate Around «Do We Even Need CSS Anymore?» с сайта css-tricks.com, автор — Крис Койер.

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

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

(далее…)

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

Перевод статьи 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»…

(далее…)