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

21 октября 2014 CSS, Статьи, Статьи по CSS 350 Перевод

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

pagespeed99

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

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

Суть метода:

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

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

Читать полностью

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

20 октября 2014 CSS, HTML5, SVG, Разное, Статьи 331 Перевод

Перевод статьи 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 включают:

Читать полностью

Идеальный размер для веба4

19 октября 2014 CSS, Статьи, Статьи по CSS 270 Перевод

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

Читать полностью

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

15 октября 2014 CSS, Статьи, Статьи по CSS 1 464 Перевод

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

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

Читать полностью

Посередине с элементом <center>17

10 октября 2014 HTML5, Статьи 1 804 Перевод

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

Элемент <center> — это потрясающе. Почему я избегал его все эти годы?

Это легче

Допустим, я собираюсь отцентрировать некий текст. В процессе поиска решения мой мозг сталкивается с «вилкой»:

  1. Я использую элемент <center>.
  2. Я не использую элемент <center>, а выбираю решение из множества вариантов на базе CSS.
Читать полностью

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

9 октября 2014 CSS, Статьи, Статьи по CSS 1 757 Перевод

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

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

Читать полностью

Руководство по внедрению CSS-колонок в адаптивный дизайн1

1 октября 2014 CSS, Статьи, Статьи по CSS 2 549 Перевод

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

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

Читать полностью

Поведение курсора при наведении на текст12

27 сентября 2014 CSS, Статьи, Статьи по CSS 2 576 Перевод

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

Читать полностью

Снова равномерное выравнивание блоков по ширине: постепенное улучшение до Flexbox7

23 сентября 2014 CSS, Статьи, Статьи по CSS, Трюки 1 038

Задача равномерного выравнивания горизонтальных элементов (например, пунктов меню) по всей ширине контейнера стабильно остается актуальной в верстке. Два года назад Максим Усачев (psywalker) написал обстоятельнейший разбор ее решений, который заслуженно стал самой популярной статьей на CSS-live.ru. Были рассмотрены 4 варианта:

  1. Вариант с разносторонним выравниванием (на базе float), к сожалению, не способный претендовать на универсальность;
  2. Вариант с дополнительным контейнером (в принципе, работоспособное решение, но только для фиксированной ширины элементов);
  3. Вариант с text-align: justify для инлайн-блоков и дополнительным элементом-распоркой (приемлемое решение);
  4. То же самое, но с заменой элемента-распорки на псевдоэлемент :after (лучшее решение).

У двух последних решений была изюминка в виде двух малоизвестных свойств CSS3 (text-align-last и text-justify), по иронии судьбы с незапамятных времен работающих в IE (где они и появились).

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

Читать полностью

Знакомый незнакомец display в контексте контекстов форматирования10

21 сентября 2014 CSS, Статьи, Статьи по CSS 1 805

Я давно собирался написать эту статью, но на прошлой неделе W3C дал замечательный повод… впрочем, обо всём по порядку. Кстати, спецификации W3C зря считают скучными: порой они могут дать фору любому детективу. В хорошем детективе всё выясняется лишь на последней странице. Но бывало ли, чтобы ключевая деталь детектива ― например, что злодеев было не двое, а трое ― раскрывалась вообще не в тексте, а… в списке найденных опечаток, на отдельном листке, вклеенном в книгу?

Так вот, в спецификациях W3C бывает еще и не такое. Например, всем нам знакомая спецификация CSS2.1: уже три года как она в статусе рекомендации, по идее, никаких изменений в ней быть не должно. Как вы думаете, сколько в этой спецификации описано наших любимых контекстов форматирования: два ― инлайновый и блочный? А вот и нет: три! Через год после «совсем-совсем-окончательного» утверждения спецификации ее авторы внезапно поняли, что на самом деле в ней описан еще один, ни на что не похожий, контекст форматирования ― табличный. Но поскольку менять окончательно утвержденную спецификацию по правилам игры нельзя, то единственное, куда можно было внести изменение ― список замеченных ошибок (errata). Так что внимательно читайте спецификации, и не только основной текст, но и добавочные ссылки! Кстати, кто пройдет квест на внимательность в оглавлении этой самой спецификации и найдет ее «секретный уровень» в виде страницы с одной загадочной фразой?

Но хватит вступлений, пора переходить к нашей первой теме, и это…

Контексты форматирования в CSS

Итак, какие они вообще бывают, по состоянию на середину-конец 2014 года?

Читать полностью

Создание видеосубтитров и формат WebVTT1

10 февраля 2014 Статьи 485 Перевод Архив

Том Лидбеттер, вторник, 29 ноября 2011

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

На данный момент у нас нет средств для предоставления информации о том, что происходит или говорится в видео, а это значит, что видео не является достаточно доступным и юзер не может легко перейти к определенной его части. Облегчает данную ситуацию формат с рабочим названием в спецификации WebVTT (Web Video Text Tracks). На данный момент он присутствует только в спецификации WHATWG, но недавно созданная W3C Web Media Text Tracks Community Group, выпустит в скором времени спецификацию WebVTT для W3C.

Вы можете вспомнить похожий, недавно обсуждаемый формат под названием WebSRT (Web Subtitle Resource Tracks), который впоследствии был переименован и заменен на WebVTT.

Читать полностью

Вращение элементов веб-cтраницы, используя трансформацию поворота CSS31

27 января 2014 CSS 3 349 Перевод Архив

С помощью CSS3 вы можете поворачивать элементы веб-страницы на заданное число градусов по часовой или против часовой стрелки. C помощью небольшого количества HTML и JavaScript кода в связке в CSS вы также можете анимировать эти повороты. В этом уроке мы проработаем поворот рисунка на разные углы, а также функцию анимирования, активизирующую вращение при взаимодействии пользователя со страницей.

Создание страницы

Сохраните новый HTML файл в выбранном вами редакторе, используя следующий шаблон кода HTML5:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
/*style declarations*/
</style>
</head>
<body>
<!--page element markup-->
</body>
</html>

Мы добавим элементы в секцию body и стили для вращения внутри CSS секции в заголовке страницы.

Читать полностью

Будущее программирования3

20 января 2014 Статьи 1 626 Перевод Архив

В этой публикации выбрана часть статьи, которая относится по тематике нашего сайта — Редакция css-live.ru.

[Автор оригинального текста Paul Chiusano, программист, работает в Capital IQ, пишет преимущественно на Scala. Один из разработчиков библиотеки scalaz — прим. пер.]

Распространение кода и будущее web.

А что же с web, javascript, html 5 и остальным? Будем ли мы и дальше идти, прихрамывая, вместе с этими технологиями? Не думаю, что сильно удивлю кого-то, сказав, что написание приложений значительной сложности для web требует гораздо большей работы, чем требовалось бы при наличии действительно богатого клиентского языка. Снова, я не думаю, что многие web-программисты осознают, насколько сейчас всё плохо. По сравнению с меинстримными языками, такими как Java, C# или Python язык Javascript не так и плох; в некоторых отношениях он даже лучше. Но Javascript не выдерживает сравнения с языками, имеющими хорошую систему типов и настоящую поддержку ФП, вроде Haskell, Scala и тех языков будущего, которые придут им на смену.

Читать полностью

ID не сделают ваш документ более семантическим5

13 января 2014 Статьи 2 871 Перевод Архив

Прежде, чем перейти к сути данного поста, я познакомлю вас с некоторыми обстоятельствами. На прошлой неделе Гарри Робертс (Harry Roberts) опубликовал фантастическую статью, в которой рассуждал о своих взглядах на плохой CSS. В этой же статье он, как и прежде, отговаривал от использования ID в качестве селекторов.

В ответ Джеффри Зельдман (Jeffrey Zeldman) попытался защитить использование ID-селекторов. Я написал Джеффри и другому комментатору несколько ответных комментариев, объясняя, почему я считаю их точку зрения неправильной.

И после дальнейшего обмена сообщениями Зельдман ответил мне следующее, что я частично процитирую ниже:

Использование ID для единичных элементов и классов для множественных – это не «прием из арсенала старой школы». Именно таким образом элементы задаются в HTML. Правильное понимание HTML не является «старомодным». Как и не является «старомодным» использование HTML-элементов так, как они должны использоваться по задумке W3C.

Также важны и его заключительные слова из того же комментария:

Мой пост был частично продиктован желанием оттеснить вирусное внедрение дезинформации.

Разумеется, любовь к силе кода минус уважение (или понимание) истинной огромной мощи HTML является преобладающим пороком web’а со времен первой табличной разметки. На протяжении большей части истории web’а для разработчиков было нормой создавать крутые проекты на отвратительных и нестабильных фреймворках и отвергать саму идею семантики в HTML.По прошествии некоторого времени, в 2000-х годах, мы смогли изменить данное восприятие, и, к счастью, множество людей в нашей сфере до сих пор верят в ценность доступной и семантической разметки. Меня беспокоят те, кто не верят, однако каждого спасти невозможно.

Мои следующие ответы, очевидно, были поглощены его спам-фильтром, так что я подумал, что мне следовало бы подытожить в данном посте, что спецификация не разделяет его точку зрения.

Читать полностью

Презентации, посвященные CSS и HTML5 и рекомендованные к просмотру1

6 января 2014 CSS, HTML5 5 197 Перевод Архив

Вот небольшая подборка презентаций, собранных мною за последние несколько месяцев на тему HTML и CSS.

Производительность CSS

Презентация Пола Айриша, сделанная на reveal.js. В ней рассматривается ряд вопросов, связанных с производительностью: пересчет положения элементов, аппаратное ускорение CSS, производительность селекторов, обеспечение поддержки в старых браузерах и пр.

Краткое введение в WAI-ARIA

Если вы одержимы семантикой HTML, бросьте это дело. Вместо этого станьте одержимым WAI-ARIA. В этой презентации Расс Викли дает краткое представление о WAI-ARIA, включая исторический обзор, примеры ролей основных меток и простые примеры использования WAI в формах.

Читать полностью

Мы в социальных сетях

Поддержите наш проект

R356817191883

41001285897040

В примечании к платежу укажите: "Помощь проекту".

Подпишись на css-live.ru

и получай обновления по email

Лучшие материалы

Комментарии Просмотры

Мы на Facebook

Мы ВКонтакте