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

1 октября CSS, Статьи, Статьи по CSS 3

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

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

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

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

27 сентября CSS, Статьи, Статьи по CSS 1 968

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

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

Новый способ равномерного выравнивания блоков по ширине с постепенным улучшением7

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Том Лидбеттер, вторник, 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 января CSS 3 033 Перевод Архив

С помощью 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 января Статьи 1 539 Перевод Архив

В этой публикации выбрана часть статьи, которая относится по тематике нашего сайта — Редакция 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 января Статьи 2 828 Перевод Архив

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Древние посты, вызывающие чувство неловкости, из популярных блогов о веб-дизайне1

30 декабря CSS 788 Перевод Архив

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

Мне показалось забавным при помощи Archive.org и простой навигации по страницам WordPress смутить кучу народу, сделав обзор некоторых ранних статей, которые я сумел найти на разных популярных блогах, посвященных веб-дизайну. Наслаждайтесь.

A List Apart: Как писать для веба

Похоже, это не самая ранняя статья на ALA, но это выпуск «1.01», так что думаю сойдет. В этом посте есть всё: безумный дизайн из 90-х, контент на нескольких страницах и вообще все сделано на наборе фреймов HTML. Зато указан doctype.

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

Достоинства CSS4

23 декабря CSS, Статьи 1 233 Перевод Архив

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

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

Медиа-запросы

Кто бы это ни придумал, он был гений. Запросы к носителям являются сердцем адаптивного дизайна, и благодаря им писать кроссбраузерный CSS снова стало весело. Они позволяют сконцентрироваться на гибкости дизайна, который не разрабатывается под конкретное устройство, но который позволяет изменять вид и размер разметки в зависимости от размера экрана.

В общем и целом, это хорошо.

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

История HTML51

16 декабря HTML5 360 Перевод Архив

Когда первая версия HTML5 была опубликована в 2008 году, возникло больше вопросов, чем ответов. Будет ли это способ объединения или разделения? Согласятся ли производители контента, программисты браузеров и создатели устройств на новые стандарты? И будут ли, наконец, исправлены проблемы, связанные с мульти-платформенной разработкой? 

Судьба HTML5 была неопределенной в течение некоторого времени, тем более что такие крупные компании, как Apple и Adobe отказались от него на мобильной арене. Будущее Flash, стандарта для передачи потокового видео в интернете, висела на волоске.

В ноябре 2011 Adobe объявила о своем намерении остановить развитие Flash для мобильных браузеров. В то время, как HTML5 постепенно проникал в сеть в целом — это стало поворотным пунктом для стандарта, и это только ускорило процесс.

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

10 великолепных аудиоплееров на HTML55

9 декабря CSS, HTML5, JavaScript, Аудио, Статьи 5 251 Перевод Архив

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

Media Element

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

Какой совет вы бы дали новичку в CSS?8

2 декабря CSS, CSS для начинающих 3 489 Перевод Архив

Не так давно моя знакомая, когда-то давно занимавшаяся веб-дизайном, спросила меня по поводу возвращения в дизайнеры. Она никогда не занималась программированием и, как я понял, ее знания в написании кода ограничиваются использованием таблиц для HTML-верстки и совсем немного CSS.

Она пожаловалась, что ее ошеломляет весь объем информации по разработке пользовательских интерфейсов. Что ж, она не одна такая. Думаю нам всем иногда не по себе от того количества информации, которое необходимо для поддержки своего профессионального уровня.

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

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

Несколько полезных документов и руководств для разработчиков пользовательских интерфейсов0

25 ноября CSS, CSS для опытных, HTML5 1 035 Перевод Архив

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

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

Руководство по стилям JavaScript от Google

Это малопонятный ресурс, в котором я пока особо не копался, но похоже, что там содержится много интересных жемчужин. Фактически это стилевое руководство Google по написанию JavaScript. Он разделено на два основных раздела: Правила языка и Правила стиля. Они хорошо резюмировали: «Целью руководства по стилю является наличие общего словаря, чтобы люди могли сконцентрироваться на том, что как вы говорите, а не как вы это делаете.»

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

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

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

R356817191883

41001285897040

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

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

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

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

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

Мы на Facebook

Мы ВКонтакте