Архив тегов: Семантика

Семантический CSS

Перевод статьи Semantic CSS с сайта snook.ca, опубликовано на css-live.ru с разрешения автора — Джонатана Снука.

Подзаголовок: почему все, кто говорит о важности семантики —  правы и неправы одновременно.

Я часто слышу про семантический CSS. Что ID и классам нужно давать осмысленные имена.

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

Так что же люди подразумевают под семантическими названиями классов. Как правило, эти названия должны описывать содержимое элементов.

(далее…)

Понимание семантики

Перевод статьи Understanding semantics с сайта tink.uk, опубликовано на css-live.ru с разрешения автора — Леони Уотсон.

Слово «семантический» уже слилось с веб-разработкой. Мы произносим «семантический код» и «семантика» элемента, но что это значит на самом деле и почему так важно?

Слово семантика происходит от французского «semantique» — «несопоставимый». А в английском у него есть три значения:

(далее…)

БЭМантика: пишите осмысленные стили без повторов

Перевод статьи BEMantic: DRY Like You Mean It с сайта https://medium.com, опубликовано на css-live.ru с разрешения автора — Мэтта Стоу.

Недавняя статья Тима Бакстера на A List Apart, «Осмысленный CSS: описывайте стилями свою логику», подбросила дровишек в костер тому мнению, будто фронтендеры, предпочитающие объектно-ориентированный подход к CSS (БЭМ или что-то вроде), как-то напрочь забывают о семантической разметке и доступности.

Лично я считаю, что так думать просто обидно. Не понимаю, почему БЭМ и семантику HTML считают взаимоисключающими. Я тешу себя надеждой, что я хороший разработчик: я горжусь как своим HTML (включая семантику и ARIA-атрибуты), так и своим CSS, где вовсю используются Sass и БЭМ.

(далее…)

Осмысленный CSS: описывайте стилями свою логику

Перевод статьи Meaningful CSS: Style Like You Mean It с сайта alistapart.com для css-live.ru. Автор — Тим Бакстер.

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

И всё же слишком часто наша разметка напоминает клубок div-ов, а наш CSS — трясина классов, лишь отдаленно связанных с этими div-ами. Мы строим пирамиды вложенных div-ов и навешиваем на каждый div пачку классов — но при взгляде в CSS эти классы едва ли подскажут нам, что именно мы хотели описать. Даже когда разметка семантична и осмысленна, в итоге мы переопределяем ее CSS-классами, взятыми с потолка. У них нет внутреннего значения.

(далее…)

Заблуждения разработчиков

Перевод статьи Developer Fallacies с сайта heydonworks.com, опубликовано на css-live.ru с разрешения автора — Хейдона Пикеринга.

Время от времени веб-разработчики (и вообще программисты) находят неудачные аргументы в защиту своего выбора технологий, рабочих процессов или организационных схем, а также для принижения чужого выбора. Я видел такое не раз, да и сам порой не удерживался от крепкого словца по такому поводу. Мы особенно уязвимы для неудачных аргументов, поскольку привыкли считать себя логичными. Как же сильно мы порой заблуждаемся.

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

(далее…)

«Готов» ли HTML?

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

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

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

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

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

(далее…)

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

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

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

(далее…)

Долговременная веб-семантика

Перевод статьи Long Term Web Semantics с сайта infrequently.org, c разрешения автора — Алекса Рассела.

Что-то раздражает меня во фразе «семантичный HTML».

Подразумеваемый смысл вполне ясен: использование HTML так, чтобы он был читаемым, описание вещей простым языком. Но «семантика» означает совсем не это. Можно было сказать просто «хорошо написанный» или «проверенный редактором». Это подошло бы лучше. Разметка, которую мы сегодня называем «несемантичной», на самом деле не такова: для конечных пользователей-то смысл есть, просто он передается слишком многословной разметкой. Рассусолено, но не «несемантично» (т.е. не «бессмысленно»).

Замысловатое и ускользающее от понимания — вроде того, что выходит из-под моего пера — плохо. Простое и ясное — хорошо. Сложно определить, что такое «просто» и «ясно», поскольку здесь замешаны вопросы значения и то, чего авторы (веб-разработчики) могут ожидать от читателей (браузеров). Для этого есть специальные фразы, напр. «Чтение на уровне 8 класса». Расчет на продвинутого читателя позволяет писать кратко и передавать тонкие оттенки. Знатокам не нужно разъяснять термины. Есть реальная польза в повышении общей грамотности в сообществе.

Употребление слова «семантичный», при котором речь идет о простоте, и подразумеваемое при этом значение этого слова говорят о глубокой путанице насчет того, как работает язык, роли разработчиков в донесении этого значения и реального потенциала смыслового развития для веба. Почему это важно? И чем плох «семантичный HTML»?

(далее…)

«Блочные» Сcылки в HTML5

Одной из новых и захватывающих вещей, которые можно реализовать в HTML5 является возможность оборачивания ссылками блочных элементов.

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

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

(далее…)

Путь верстальщика

Основано на реальных событиях…

Будучи администратором одного из известных форумов, я часто сталкиваюсь с тем, что начинающие веб-технологи не знают, с чего начать своё обучение, какую читать литературу и в каком направлении им двигаться. Периодически мне доводится слышать один и тот же вопрос — «Как стать хорошим верстальщиком?». Краткий ответ может оставить у новичка ещё больше вопросов, поэтому одного или нескольких постов с ответами на форуме недостаточно, чтобы полностью описать все необходимые, на мой взгляд, пункты. 

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

(далее…)

Блок-схема алгоритма выбора структурных (секционных) элементов HTML5

Лёгкая для понимания блок-схема алгоритма выбора структурных (секционных) элементов HTML5. Она сможет помочь вам разобраться в предназначении некоторых новых элементов HTML5.

Здесь можно увидеть эту схему «в полный рост».

Источник схемы

«Блочных и строчных элементов» в HTML больше нет

Для тех, кому лень читать всю статью: в HTML нет «блочных» и «строчных» элементов. Это деление — историческая ошибка, чистая условность и анахронизм времен конца 90-х. Элементы HTML различаются между собой не формой и внешним видом, а смыслом и предназначением (структурные, текстовые, интерактивные и т.п.), именно оно определяет, что во что можно вкладывать. А «блочностью», «инлайновостью», любыми их комбинациями и др. чисто внешними чертами заведует исключительно CSS.

Остальное — для тех, кто до сих пор не верит или просто желает разобраться до конца.

(далее…)

Адаптивные изображения в HTML5: конец первого раунда

Брюс Лоусон, среда, 16 мая 2012

После Великого Апрельского Браузерно-Префиксного Тарарама пришла Великая Майская Адаптивно-Картиночная Шумиха 2012-го.

Адаптивные изображения — очередная неразгаданная загадка «отзывчивого» веб-дизайна. Вы отдаете большие картинки высокого разрешения, подходящие для экранов типа «ретины», которые устройства с меньшим разрешением показывают уменьшенными, зря расходуя трафик? Или вы отдаете картинки низкого разрешения, которые мерзко выглядят, будучи растянутыми на большом экране? Вебмастерам приходится рассчитывать на искусные хаки, чтобы отдавать различные контентные картинки (т.е. <img> в HTML, а не CSS-фоны) для разных типов устройств.

(далее…)

Новые обонятельные, осязательные и вкусовые элементы приходят в HTML5

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

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

В ближайшее время W3C представит три новых элемента HTML5, поддерживающих интерфейсы для других органов чувств:

  • <texture> для осязания
  • <aroma> для обоняния
  • <flavor> для вкуса

(далее…)

О семантике HTML и архитектуре веб-фронтенда

Перевод статьи Николаса Галлахера «About HTML semantics and front-end architecture», переводчик — SelenIT

Собрание мыслей, опыта, идей, которые мне нравятся и идей, с которыми я экспериментировал последний год. Они охватывают семантику HTML, компоненты и подходы в архитектуре веб-фронтенда, способы именования классов и HTTP-сжатие.

Мы не прервем своих исканий,
И под конец всех странствий наших
Придем туда, откуда вышли,
Узнав впервые этот край.

Т. С. Элиот — «Маленький Гиддинг»

(далее…)