Pull to refresh
6
0
Daniil Filippov @dif

Пользователь

Send message
Ох. Посмотрел по вашей ссылке свою «статью», которую написал 4 года назад — теперь не могу развидеть этот кривой CSS и говнокод на jQuery :(

Спасибо, что напомнили — обязательно перепишу это безобразие с гордой пометкой «tutorial», как появится время.
А, прошу прощения, не так вас понял :) В принципе — незачем, можно использовать и один .row.

В том же Foundation, кстати говоря, для таких вещей сделали Block grid. Не знаю, есть ли нечто подобное в Bootstrap.
Спецификация W3C говорит, что

A nav element doesn't have to contain a list

но

In cases where the content of a nav element represents a list of items, use list markup to aid understanding and navigation.

А вообще, существует два мнения по этому вопросу:

  1. (в пользу списков) — списки внутри nav делают верстку более структурированной и семантичной. Если буквально, то мы видим перед собой «список ссылок», следовательно, и верстаем его как список ссылок. Кроме того, со списками можно легко делать навигацию, если в ней есть вложенные подразделы.
  2. (в пользу «listless» nav) — списки могут затруднять пользование сайтом людям с ограниченными возможностями, которые пользуются Screen Reader-ами (http://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/).


Однако, последнее утверждение достаточно спорное, если почитать комментарии к этой статье:

css-tricks.com/navigation-in-lists-to-be-or-not-to-be/#comment-689246

(...)

(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.
  1. Существует правило, по которому все элементы с float желательно оборачивать элементом с так называемым clearfix — это хак, который «очищает поток», искусственно выставляет у контейнера с плавающими элементами высоту, равную высоте самого крупного из них. Без него контейнер будет иметь нулевую высоту (т.к. в нем нет статического содержимого), а это может привести к тому, что последующие за ним элементы как бы «протекут» внутрь него:

    jsfiddle.net/h2k3q/

    В случае Bootstrap то же самое: сеточные «колонки» .col.col-md-4 делаются на float, а для .row задается «micro clearfix» вида

    .row:before, .row:after{
        display: table;
        content: " "
    }
    


    Кроме этого, для .row также задаются отрицательные горизонтальные отступы, равные постоянному «зазору» сетки — это необходимо для создания «full-width layout», а в некоторых css-фреймворках (например, Foundation) для .row задается также max-width, что ограничивает ширину всей сетки, и выравнивание по центру (margin: 0 auto) — по сути, то же самое, что делает .container у Bootstrap.
  2. Это обусловлено фреймворком?

    Скорее, это обусловлено структурой макета :) Но, как уже писал выше, от этих классов можно избавиться, используя миксины:

    {селектор для нужного "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/ — просьба исправить.

Автору большое спасибо за статью!

Information

Rating
Does not participate
Registered
Activity