In cases where the content of a nav element represents a list of items, use list markup to aid understanding and navigation.
А вообще, существует два мнения по этому вопросу:
(в пользу списков) — списки внутри nav делают верстку более структурированной и семантичной. Если буквально, то мы видим перед собой «список ссылок», следовательно, и верстаем его как список ссылок. Кроме того, со списками можно легко делать навигацию, если в ней есть вложенные подразделы.
(1) semantics: at the UL JAWS pauses and announces that I’ve entered a list, it tells me at least that the next items go together; NAV is better but a list of links is not necessarily a navigation, (2) JAWS understands li tags as separate items and stops after reading each item, (3) more semantics: hierarchy is clear if one list is nested inside another (subnav) – JAWS announces nesting. For nested navigation/links, I would lean towards nested lists. (4) Not sure how people use this exactly, but JAWS does have a shortcut key that detects any lists on the page. Lists are more discoverable.
Существует правило, по которому все элементы с float желательно оборачивать элементом с так называемым clearfix — это хак, который «очищает поток», искусственно выставляет у контейнера с плавающими элементами высоту, равную высоте самого крупного из них. Без него контейнер будет иметь нулевую высоту (т.к. в нем нет статического содержимого), а это может привести к тому, что последующие за ним элементы как бы «протекут» внутрь него:
Кроме этого, для .row также задаются отрицательные горизонтальные отступы, равные постоянному «зазору» сетки — это необходимо для создания «full-width layout», а в некоторых css-фреймворках (например, Foundation) для .row задается также max-width, что ограничивает ширину всей сетки, и выравнивание по центру (margin: 0 auto) — по сути, то же самое, что делает .container у Bootstrap.
Это обусловлено фреймворком?
Скорее, это обусловлено структурой макета :) Но, как уже писал выше, от этих классов можно избавиться, используя миксины:
{селектор для нужного "row"} > div{
.make-md-column( 4 )
}
{селектор для нужного "row"} > div:not(:first-child){
.make-md-column-offset( 1 )
}
Думаю, было бы неплохо написать еще про миксины для сетки. С ними можно обойтись без лишних, на мой взгляд, классов вроде .col-md-offset-1, что делает верстку семантичнее. Но это дело вкуса.
При получении access_token для социальной сети ВКонтакте теперь нужно обязательно передавать redirect_uri + можно уже делать и POST-запрос, а у Twitter изменился адрес API: https://api.twitter.com/1.1/ — просьба исправить.
Спасибо, что напомнили — обязательно перепишу это безобразие с гордой пометкой «tutorial», как появится время.
В том же Foundation, кстати говоря, для таких вещей сделали Block grid. Не знаю, есть ли нечто подобное в Bootstrap.
но
А вообще, существует два мнения по этому вопросу:
Однако, последнее утверждение достаточно спорное, если почитать комментарии к этой статье:
css-tricks.com/navigation-in-lists-to-be-or-not-to-be/#comment-689246
float
желательно оборачивать элементом с так называемым clearfix — это хак, который «очищает поток», искусственно выставляет у контейнера с плавающими элементами высоту, равную высоте самого крупного из них. Без него контейнер будет иметь нулевую высоту (т.к. в нем нет статического содержимого), а это может привести к тому, что последующие за ним элементы как бы «протекут» внутрь него:jsfiddle.net/h2k3q/
В случае Bootstrap то же самое: сеточные «колонки» .col.col-md-4 делаются на
float
, а для .row задается «micro clearfix» видаКроме этого, для .row также задаются отрицательные горизонтальные отступы, равные постоянному «зазору» сетки — это необходимо для создания «full-width layout», а в некоторых css-фреймворках (например, Foundation) для .row задается также
max-width
, что ограничивает ширину всей сетки, и выравнивание по центру (margin: 0 auto) — по сути, то же самое, что делает .container у Bootstrap.Скорее, это обусловлено структурой макета :) Но, как уже писал выше, от этих классов можно избавиться, используя миксины:
Автору большое спасибо за статью!