CSS

Производительность CSS-анимаций: нерассказанная история (с комментариями Пола Айриша)

Максим Усачев
1

Перевод статьи CSS animations performance: the untold story с сайта greensock.com, c разрешения автора — Джека Дойла.

У использования CSS-анимаций есть несколько интересных (и удивительных) последствий для производительности, о которых не все знают. Я столкнулся с некоторыми из этих последствий, пока тестировал их для клиента в рекламной индустрии, который настаивал на том, что GSAP принят в качестве стандарта, поэтому я записал скринкаст, поясняющий что именно я обнаружил. Я решил, что было бы полезно поделиться этим:

Знакомство с object-fit

stasgavrylov
3

Перевод статьи Exploring object-fit с сайта hacks.mozilla.org (лицензия СС3.0), автор — Крис Миллс.

При работе с веб-документами мы довольно часто сталкиваемся с задачей отображения изображений (или видео) разного размера в одном и том же месте. Предположим, что вы пишете приложение с динамической галереей, которая позволяет пользователю загружать свои файлы. Вы не можете гарантировать, что все будут загружать изображения с одинаковым соотношением сторон. Что же делать?

Если разрешить соотношению сторон заполнять все пространство элемента-контейнера, то в большинстве случае это будет выглядеть ужасно. А кадрировать и менять размеры динамически «на лету» может оказаться не в ваших силах. (Допустим, если вы работаете с CMS и имеете права только для редактирования содержимого страницы.)

Использование встроенных SVG с резервной поддержкой Grunticon

stasgavrylov
2

Перевод статьи Inline SVG with Grunticon Fallback с сайта css-tricks.com, c разрешения автора — Криса Койера.

Вышел Grunticon 2! Он обзавелся новым вебсайтом. Grunticon — это невероятно крутой инструмент для создания системы SVG-иконок. Рабочий процесс выглядит следующим образом:

  1. Поместите все SVG-иконки в одну папку
  2. Запустите Grunticon в этой папке, и он подготовит всё, что необходимо
  3. Поместите в <head> крохотный скрипт
  4. И используйте HTML в формате <div class="icon-image"></div> там, где вам понадобится использовать иконки
  5. Наслаждайтесь!

Создание аудиоплеера при помощи HTML5. Часть 1: функции и дизайн

Максим Усачев
1

Перевод статьи Making An Audio Player With HTML5, Part 1: Features and Design с сайта demosthenes.info, c разрешения автора — Дадли Стори.

Возможно, вы не настолько стары, чтобы помнить дни WinAmp-а, который был (в своём первноначальном воплощении) основной программой для проигрывания MP3 с "киллер-фичей" в виде настраиваемых тем. Сегодня у вас есть возможность создать свой собственный плеер, используя  HTML5 и JavaScript, и настроить его внешний вид при помощи CSS. Планирование и разработка этого плеера позволит разработчикам познакомиться с HTML5-мультимедиа, JavaScript DataViews и WebAudio API.

Развлечения с line-height!

Максим Усачев
9

Перевод статьи Fun with line-height! с сайта css-tricks.com, c разрешения автора — Криса Койера.

Свойство line-height в CSS управляет расстоянием между строками текста. Его часто устанавливают в безразмерное значение (напр. line-height: 1.4;), чтобы оно было пропорционально размеру шрифта. Это свойство крайне необходимо для управления типоргафикой. Если расстояние между строк слишком маленькое, то строки неуклюже придавлены друг к другу; а если слишком большое, то строки выглядят неуклюже растопыренными. Оба случая тормозят чтение текста. Но, вероятно, вы уже сами это знаете.

Почему мы не можем делать по-настоящему адаптивные изображения при помощи CSS или JavaScript

Максим Усачев
13

Перевод статьи Why we can’t do real responsive images with CSS or JavaScript с сайта brucelawson.co.uk, c разрешения автора — Брюса Лоусона.

Среда, 21 января 2015

Я пишу доклад на тему <picture>, srcset и их «товарищей» для конференции Awwwards в Барселоне через месяц (да, я знаю, что это неслыханный запас по времени; но я планирую поехать отдохнуть в течении двух недель). Я решил, что, прежде чем перейти к основной теме, я должен ответить на вопрос «Зачем вся эта новая сложная разметка? Почему бы просто не использовать CSS или JavaScript?», поскольку его неизменно задают.

Фреймворк AngularJS не для сайтов

Максим Усачев
16

Перевод статьи AngularJS is not for websites с сайта wolfslittlestore.be, c разрешения автора — Йохана Ронсе.

Я хотел написать небольшую предысторию про мой комментарий в Твиттере об AngularJS и сайтах, и тем самым предоставить более детальный обзор.

Люди, поймите, AngularJS не предназначен для сайтов. Два новых крупных сайта в Бельгии, финансируемые деньгами налогоплательщиков, не доступны для слепых. Это больно видеть.

— Йохан Ронсе (@wolfr_) 14 Октября 2014

Я не знаю, о чем я думал, когда писал, что это больно «видеть». Шутки в сторону, этот комментарий о недавних редизайнах antwerpen.be и stubru.be.

Адаптирующиеся картинки-заставки на CSS

Максим Усачев
7

Перевод статьи Flexible CSS cover images с сайта nicolasgallagher.com, c разрешения автора — Николаса Галахера.

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

Поддержка браузерами: Chrome, Firefox, Safari, Opera, IE 9+

Развлечения с CSS-счётчиками

Максим Усачев
6

Перевод статьи Уилла Бойда «Fun Times with CSS Counters» с сайта codersblock.com.

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

Заметки о черновике CSS-свойства «alt»

Максим Усачев
2

Перевод статьи Брюса Лоусона «Notes on draft CSS “alt” property» с сайта brucelawson.co.uk.

Недавно в Рабочей группе CSS была дискуссия про свойство alt, которое должно было быть добавлено в CSS. Цель этого свойства – помочь вспомогательной технологии понять значение символов юникода, встроенных в визуальное представление документа с помощью сгенерированного контента CSS. Проблема описана Джеймсом Крейгом – славным малым по доступности контента из Apple.

Вот уже год как это свойство поддерживается в виде -webkit-alt и только что было добавлено в черновик спецификации CSS-модуля псевдоэлементов 4-го уровня. Представим, что вы используете символ звездочки, чтобы показать что что-то является «Новым» при помощи генерации CSS-контента, используя в качестве селектора класс .new.

(обн. )

Быстрая загрузка веб-шрифтов на адаптивных сайтах

Максим Усачев
37

Давным-давно каждый сайт использовал для отображения текста только такие шрифты, как Arial, Verdana, Garamond или Times New Roman, потому что только эти шрифты наверняка были установлены почти на любом компьютере. Но эти времена позади. Веб-шрифты распространяются по всему интернету, но мы все еще толком не знаем, как загружать их эффективнее.

pagespeed99

Эта статья – моё простое руководство о том, что делать, чтобы предложить оптимальный пользовательский опыт без необходимости избегать «дорогих украшений» (ака веб-шрифтов)

0. Если лень читать полностью

Суть метода:

  1. Используем шрифты только в формате woff
  2. Другие браузеры получает старые «безопасные» шрифты
  3. Загружаем шрифт в бинарном формате и оптимизируем его
  4. Отдаем шрифты сами
  5. Отдаем их в качестве CSS-файлов – URIs с закодированными в base64 данными
  6. Если у пользователя нет шрифта, загружаем его асинхронно и сохраняем в localStorage
  7. Иначе загружаем его из localStorage без обращения к серверу.
  8. Радуемся, потому что ваш сайт отображается намного быстрее, а ваши пользователи получают намного больше удобства

Для тех, кто всё ещё читает, вот мои разъяснения, насчет верхних пунктов.

(обн. )

Руководство по SVG-анимациям (SMIL)

SelenIT SelenIT
29

Перевод статьи A Guide to SVG Animations (SMIL) с сайта css-tricks.com, автор — Сара Суайдан. Публикуется с разрешения автора.

Перед вами гостевой постинг Сары Суайдан. Сара — мастер докапываться до самых глубин классных веб-новинок, подробно и понятно разбирая их до основания. Здесь она погружается в недра SMIL (и смежных технологий) и синтаксиса анимаций, встроенного в сам SVG, и делится с нами этим внушительным руководством.

Введение

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

  • <animate> — позволяющий анимировать скалярные атрибуты и свойства в течение периода времени;
  • <set> — являющийся удобным сокращением для animate, что удобно для задания анимаций для нечисловых атрибутов и свойств, наподобие свойства visibility;
  • <animateMotion> — позволяющий двигать элемент по заданной траектории;
  • <animateColor> — изменяющий значение цвета каких-либо атрибутов или свойств с течением времени. Заметьте, что элемент <animateColor> устарел, и вместо него рекомендуется использовать обычный элемент animate для свойств, принимающих значения цвета. Тем не менее, он всё еще есть в спецификации SVG 1.1, где он явно помечен как устаревший; из спецификации SVG 2 он удален полностью.

В дополнение к анимационным элементам, определенным в спецификации SMIL, SVG включает расширения, совместимые со спецификацией SMIL animations; эти расширения включают атрибуты, расширяющие функциональность элемента <animateMotion>, и дополнительные анимационные элементы. В расширения SVG входят:

(обн. )

Идеальная ширина столбца для веба

Максим Усачев
5

Недавно я создал инструмент, который может помочь вам установить идеальную длину  строки текста на веб-странице. Вы можете регулировать несколько таких переменных, как font-family и язык. При перемещении ползунка можно увидеть, какое  количество слов или символов находится в строке. Теперь вы можете выбрать идеальный размер, основываясь на той теории, которая вам больше нравится (10 слов или что-нибудь между 45 и 75 символов). Согласно мнению типографа Роберта Брингхёрста это самый лёгкий способ определить идеальный размер.

Шпаргалка по шпаргалке по Flexbox

Максим Усачев
6

Хотя я и не новичок в магии Flexbox, я понимаю, что пока ещё не использую её очень часто. Как результат, в конечном итоге я останавливаюсь и возвращаюсь к этой статье на CSS-Tricks, всякий раз, когда появляется возможность использовать силу Flexbox.

Я задалась целью создать наглядный материал, чтобы быстро получать краткую справку по Flexbox, когда я буду натыкаться на такие моменты неясности в будущем. Мне нравится думать об этом, как о маленькой диаграмме (блок-схеме? чем-то вроде дерева решений?), которая является шпаргалкой… основанной на шпаргалке.

(обн. )

Список псевдоэлементов для стилизации элементов управления формы

Максим Усачев
12

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

Несмотря на то, что все эти псевдоэлементы специфичны для каждого браузерного движка (и поэтому требуют браузерных префиксов), они всё равно могут быть полезными для кастомизации отображения в каждом из них. Эта статья – моя лучшая попытка составить полный список псевдоэлементов, доступных в движках Trident, Gecko, и WebKit. На момент написания этой статьи движок Blink с недавних пор является ответвлением WebKit, так что псевдоэлементы в них идентичны. Я не в курсе на счёт псевдоэлементов, которые поддерживает Presto.