Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 92

    –2
    Мастер!
      +1
      Опера 9.1 Уголки в блоге съезжают)
        –4
        обновитесь до оперы 9,52, делов-то
          +1
          У меня 9.52, но тоже сьезжают.
            0
            Да, есть такая проблема, спасибо.
              –7
              ну эт уже другое дело, какжи так, проверять жиж нада перед релизом общественности
        +3
        Статья, конечно, хорошая для расширения кругозора. Но имеется ли какая-то реально практическая потребность(потренировать себя и свой мозг — да, хорошо, с этим не спорю) использования li, ul, dt, dd и т.п. для вёрстки вместо div? Можно было(гипотетически) бы сверстать то же самое, но используя только один див и много разных span с display: block:-) На данный момент, думаю, это всего лишь разминка мозга(ну либо, как в данном случае, желание «хочу с одним дивом»=))
          +4
          Вы совершено правы! Это именно разминка для мозга, ничего более.

          Кстати, гипотетически я не мог бы начать делать работу с кучей span, это же не семантично. Смотрите на это все как на гипертрофированно- семантичный макет :)
            –2
            дааа, <hr> — это просто верх семантики
              +1
              Как ни странно, но HR это семантика. Вы плохо почитали что я написал.
                +4
                то, что вы вдруг с потолка для себя решили, что <hr> — это «разделитель секций в документе», это ваше право.
                но к семантике тег не имеет никакого отношения, в спецификации написано четко: «The HR element causes a horizontal rule to be rendered by visual user agents».
                  +1
                  Советую вам посмотреть на DOCTYPE моего документа, и самому решить на правильную ли спецификацию вы привели линк.
                    +1
                    просто нет слов :)… я конечно рад, что у вас такое необычное хобби, как html верстка, и мне как профессионалу это даже немного льстит, но не нужно свои какие то умозаключение преподносить как истину в конечной инстанции, тем более, что такая истина в данном случае, к счастью, есть, в виде стандартов

                    что же до ваше комментария, то вы, наверное, не в курсе, что стандарт xhtml не описывает еще раз теги html, но для любителя это не страшно
                      –2
                      Ok, я умываю руки. Спорить с профессионалом не буду. Не потому что вы правы, просто не вижу смысла доказывать очевидные вещи, человеку, который хочет просто поспорить.

                      Не продолжения спора ради, вот как описан HR в спецификации HTML 5.0
                      www.w3.org/html/wg/html5/#the-hr

                      Мне, как любителю, это описание кажется очень разумным, с точки зрения семантики.
                        +3
                        блин, я вам факты привожу, а вы каким то словоблудием занимаетесь
                        что же до html5, драфт, на который вы ссылаетесь, еще не принят и искренне надеюсь, что hr в окончательном варианте не будет ни в каком виде, ни в новом описании как сейчас, ни тем более в старом как в текущем стандарте
                        спор за сим прекращаю так же, что забавно по той же причине
                      +4
                      и если уж вы так упорно не пытаетесь понять, что вам говорят, добью вас ссылкой на описание The XHTML 1.1 Document Type, где ваш позорный hr отнесен в группу Presentation Module, заметьте, не в Structure Module и даже не в Text Module, а именно в Presentation, вместе с такими позорными вещами как b, big, i, small, sub, sup, tt, черт возьми!
                        0
                        А чем, простите, вы заменяете small, sub и sup?
                          –2
                          если вы про техническую сторону, то:
                          — small это уменьшенный шрифт, {font-size: нужный размер} решает вопрос
                          — sub и sup это сдвиг инлайн элемента по высоте относительно основной линии (решается vertical-align'ом) и уменьшение размера (решается как со small)

                          если вы про семантическую сторону, то теги заменяются по контексту подходящими тегами, в зависимости от того, что в них находиться по смыслу
                            +1
                            Я исключительно про семантику.

                            Если, скажем, у меня есть сноски под основной информацией, а в тексте — ссылки на них (часто в статьях Википедии можно увидеть), то на какой «более подходящий» элемент я должен заменить sup и, самое главное, зачем?
                              0
                              Почему-то сразу после написания понял, что мне предложат убрать sup совсем. Пример наверное неудачный :)
                                0
                                Да, пример неудачный ;) Надо вопрошать на какой «более подходящий» элемент надо заменять указание степени числа в формуле. И когда предложат заменить на span с классом, спросить «а нафига ?» ;)
                                  +1
                                  Я лично думаю, что большинство формул вообще придется заменить на img :)
                                +1
                                давайте начнем со второго вопроса «зачем?», понимание этого зачем и есть понимание семантики, это собственно ее основа: элемент должен описывать содержимое, а не способ отображения этого содержимого. sup это superscript, то есть «элемент над строкой», название и суть описывает не содержимое, а как его показывать — семантика тут курит.

                                теперь по поводу «чем?» говорим о сносках как в вики — отличный пример из реальной жизни. что там такое сноска? это фактически ссылка на какой то поясняющий текст (обычно внизу документа или части документа), ну ссылка так ссылка:

                                <a href="#footnote1" id="footnote1" class="footnote">[1]</a>

                                (зачем в той же вики ссылка обрамлена лишним sup'ом, со всякими атрибутами, мой мозг не понимает)

                                интересно: в html5 ссылки разделяют на 3 типа и предлагают использовать в зависимости от того, насколько много текста в пояснении: для коротких сносок использовать не тег, а атрибут title, например, для тега span; для длинных — тег ссылки a; или же вообще воспользоваться «комментарием по ходу» (сбоку от текста, как например в ководстве), использовав тег aside.
                                  +2
                                  Ну, про сноски я себя сам моментально исправил :)

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

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

                                  И, кстати, мне самому интересно: вы совсем не верите в семантику small?
                      +2
                      а уж называть семантичными конструкции вида: <hr id="some-id" /><!--[if IE]><div id="some-id-ie"> </div><![endif]-->, это уж простите, я застрелюсь лучше
                        –2
                        Мне до сих пор стыдно за это, но в статье я привёл аргументы, почему было принято такое решение.
                  +5
                  Но имеется ли какая-то реально практическая потребность(потренировать себя и свой мозг — да, хорошо, с этим не спорю) использования li, ul, dt, dd и т.п. для вёрстки вместо div? Можно было(гипотетически) бы сверстать то же самое, но используя только один див и много разных span с display: block:-)
                  вообще в работе уместное использование — полезно, т.к. это улучшает семантику и повышает доступность сайта.

                  Статья будет полезна начинающим верстальщикам как пример качественной верстки.

                  Из замечаний:
                  — слабо использованы заголовки (кроме h1-h2 ничё нет)
                  — недостаточно активно использованы микроформаты (как минимум надо hAtom и rel-tag)
                  — ненаписаны стили для печати и мабил
                  — WAI можно ещё сильнее прокачать.
                    0
                    Спасибо! Я ждал именно таких замечаний. По поводу заголовков, ничего не могу поделать, ну реально не больше третьего уровня нужно :)

                    Остальное полностью согласен с вами. Буду фиксить… Еще раз спасибо.
                  +2
                  Всё хорошо, но вот ограничение в один div какое-то ну очень надуманное. Изврат ради изврата.
                    0
                    Конструктивно. Другие замечания будут? ;)
                    На самом деле объяснение для использования только одного DIV, очень простое, так более семантично.
                      +1
                      Ничуть. Почему не использовать для сайдбара блок? Он же с точки зрения семантики и есть блок?
                        +1
                        А по моему это набор (список) блоков. Сайдбаров у меня несколько.
                        Другой вопрос что надо было UL использовать, а не DL. Но и на этот счет у меня есть соображения.
                    0
                    Не… это блоки в сайдбаре. А сам сайдбар уже не в счёт?
                      –4
                      После рефреша хабра не цепляет коммент к комменту… или мне показалось?
                        +1
                        Общий контейнер для всех сайдбаров — DL, для конкретного DT и DD, все логично вроде…
                          +1
                          Ну, более-менее.
                            +1
                            Ладно, это решение может и оправдано, но само ограничение в один div очень уж странно…
                          +3
                          Спасибо за информацию касательно height:100%. Я стал немного умнее. :)
                            0
                            Пожалуйста. Этот баг как раз хорошо описан в статьях. Вот чудеса с HR в IE, были для меня сюрпризом…
                              +1
                              А вот про hr, я как раз знал: D но еще раз спасибо
                            0
                            спасибо за ссылку на перевод.

                            Вадим бы откомментировал семантику, он тут гуру. От себя добавлю, что в dl использовал бы h4 вместо strong (если такое позволительно с точки зрения спецификации).

                            И пока не понятно, почему нельзя было на hr накинуть display: none, если он только для семантики
                              0
                              В dt, dd нельзя использовать блочные элементы (или я ошибаюсь?)
                                0
                                в DD можно FLOW (надо смотреть, что входит), а вот в DT, действительно, только Inline
                                <! ELEMENT dt %Inline;>
                                +2
                                И пока не понятно, почему нельзя было на hr накинуть display: none, если он только для семантики

                                я тоже вначале не понял, а он их использовал ещё как доп-элементы, из-за того что div всего один.
                                для фоновой графики, для футера внизу…
                                  0
                                  Совершено верно! Контейнеров мне сильно не хватало, использовал всё что есть :)
                                    0
                                    зря Вы так. Контейнеров — хоть отбавляй, взять те же q, cite, blockquote
                                +1
                                Сайт испытывает жесточайший «Хабра эффект» т.е. он тупо лежит: D
                                кстати скролинг подтормаживает немного, видимо браузеру не совсем по душе твой «брейн фуцк»: D
                                  0
                                  500я ошибка
                                  задосили?
                                    +1
                                    Понравилось. На выходных займусь чем нибудь подобным — для развития полезно.
                                      0
                                      У firebug'а от вашей верстки сносит крышу — inspect и html-дерево творят вообще что-то несуразное >))

                                      p.s. на следующем уровне предлагаю сделать вёрстку пропорционально тянущейсе по горизонтали.
                                        0
                                        У меня одного 5 одинаковых топиков про css-джедаизм на главной? Или автор использует силу?
                                          –1
                                          можно было тогда уж вообще без дива. ul вполне подходит
                                          и в шестом-то тестили? конечно может быть это у меня проблемы с отображением на мульти ИЕ вкупе с восьмой бетой2, но в шестерке же все не совсем так в ФФ. внутренний фон с цветочками ездит. белый фон вылезает куда только можно. да и в седьмом этот же фон внизу не на месте.
                                          а так за любовь к чистому искусству — зачёт)
                                          за исполнение — 4 с минусом, а если не для себя, а в коммерческом проекте, то и вообще двойка
                                            0
                                            про седьмой — прошу прощения, это в восьмом косяк
                                              0
                                              ну, в IE6 только футер съехал. А так — нормуль. А вот 5.5 — это да…
                                            +1
                                            после того как в заголовке и превью тексте увидел «хитрости CSS», а практически в первых же строках кода конструкцию — header for site, я было подумал, что автор в принципе в CSS ничего не смыслет…
                                            однако т.к. статья была всеже о другом — твердая четверка
                                              +3
                                              сорри — теги то убрались…
                                              а конструкция, которая меня по-настоящему сбесила в статье с таким название вот:

                                              [h1] [strong] [a href=«/»]header for site[/a][/strong] [/h1]

                                              человек выдумывает для себя упражнения, в то же время не озабачиваясь прописывать в CSS казалось бы априори входящие туда элементы оформления кода…
                                                –3
                                                Вы не могли бы пояснить свою мысль, потому что я никак не могу понять в чем там проблема вообще ;)
                                                  0
                                                  кстате да, зачем стронг?
                                                    –4
                                                    Пошел смотреть, зачем там «стронг», запустил фаербаг… это видеть надо, что с ним твориться в режиме «инспект». А внешне все так мило =/
                                                      +1
                                                      Делаю ударение на названии сайта.

                                                      Теперь я понял хотел сказать MASe своим коментом! Народ, там strong не потому что я не знаю как сделать текст жирным при помощи CSS ;)

                                                        +1
                                                        а разве вес h1 недостаточен? куда уж весомее-то
                                                          +1
                                                          Это не одно и то же. Заголовок это заголовок, а ударение на ЧАСТИ заголовка это совсем другое. Если я допишу еще какой нить текст в заголовок вне тега strong, то тем самым я сделаю ударение за названии блога, а остальное будет просто дополнение, хоть и тоже заголовком.
                                                            0
                                                            ну, вообще, вполне логичный ответ, я тоже так иногда делаю, особенно когда в логотипе, например, есть название конторы и слоган, и, при этом, всё это месиво надо зареплейсить бэкграундом высокоэстэтичным, в итоге получается что-то типа:

                                                            [h1 id=«logo»][strong]название[/strong] — [small]слоган[/small][/h1]
                                                              +1
                                                              Т.е. ваш вопрос это была просто проверка? ;)
                                                                +1
                                                                да не то чтобы проверка, просто интересно было прочитать логическое обоснование :)
                                                                чьорт, меня тут пластмассовые лемминги без чувства юмора заминусовали, не могу каментить чаще чем раз в пять минут :)
                                                                0
                                                                А не получается ли слишком много текста в заголовке в результате? Интересно, кстати, как с семантич. точки зрения правильнее делать заголовок с подзаголовком? В виде пары h1|h2 или таких заворотов?
                                                                И как к этому отнесутся поисковики?
                                                                  0
                                                                  Заголовки — блочные элементы, которые могут содержать только строчные, вложенные заголовки сами по себе выглядят абсурдно, а с точки зрения синтаксиса — абсолютно недопустимы.
                                                                    0
                                                                    эээ… я имел в виду не вложенные, а идущие друг за другом заголовки h1 и h2 со слоганом.
                                                                      0
                                                                      ну фиг знает, имхо, в данном конкретном случае и название, и слоган, являются по сути заголовком первого уровня, но одна его часть как бы немного важнее, поэтому мы ставим на ней акцент, а вторая — как бы не такая важная типа :)

                                                                      ну это моё субъективное восприятие, это же, в принципе, нигде в спеках не прописано, возможно другой веб-девелопер разложит эту ситуацию на другие атомы, у меня, вот, так получилось, если считаете, что я не прав — приведите аргументы
                                                                        0
                                                                        вот и скажите, что, сцуко, не лемминги, за что, блядь, минус, идиоты?
                                                                    +1
                                                                    А нам, адептам семантики, пофиг поисковики. Пусть учатся понимать любые валидные и логичные заголовки :)
                                                                  –9
                                                                  КАКОЙ СМЫСЛ ДЕЛАТЬ УДАРЕНИЕ НА ВСЕ ЧАСТИ ЗАГОЛОВКА ОДНОВРЕМЕННО?

                                                                  а если ты допишешь ещё какой-то текст — тогда и появится смысл расставлять акценты, [b]а пока его — нет[/b].
                                                                    0
                                                                    o_0 Ну что уж статья — мегаизврат, а стронги в х1 так это вообще!
                                                          +1
                                                          В IE7 почему-то не загрузился фон.

                                                          А вообще, круто: цель себе поставил — сделал. Так всем надо работать ))
                                                            0
                                                            У меня одного при скролинге блога с этой версткой в лисе жесточайшим образом все тормозит и проц грузится под 100%? Проц совсем не древний.
                                                              +2
                                                              почему один а не ноль или десять? использование dl и ul вместо div что-то сильно меняет?

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

                                                              насчёт резета.цсс — никогда не понимал маразма с перечислением всех тэгов. что мешает воспользоваться звёздочкой?

                                                              ну и хаки… почему хтмл код должен быть минималистичным и опрятным, а в цсс можно громоздить хаки и прочее непотребство?
                                                                0
                                                                1. Я не вёл речь о «крупных проектах». Я не делал вечный примус, на все случаи жизни. Я делал верстку для своего блога. В моем блоге верхнее меню не исчезнет, и там всегда будет место. Это я вам обещаю как владелец этого ресурса ;)

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

                                                                3. В основном CSS у меня нету хаков. Вы можете в этом легко убедиться, просто сделав валидацию.
                                                                  –1
                                                                  1. ты взялся учить новичков «как надо делать». а потом оказывается, что всё это годится лишь для домашних страничек, где верстальщик — «царь и бог». в реальности же всё куда печальней — как скажут, так и надо делать, и придётся заново перерезать картинки и накладывать хаки…

                                                                  2. а мне нравится, когда я точно знаю, что, что бы там не намутили создатели браузеров, все элементы ведут себя одинаково. вот проблему с кривым наследованием в ие ты как решаешь?

                                                                  3. почему есть основной и неосновной цсс, а хтмл должен быть всегда один для всех?
                                                                  впрочем, вот хаки из резета, которые грузятся всем:
                                                                  * html hr{
                                                                  margin:0; /* for IE6 */
                                                                  }
                                                                  *+html hr{
                                                                  margin:0; /* for IE7 */
                                                                  }

                                                                  а вот непотребство:
                                                                  #ww-menu li: first-child a,
                                                                  #ww-menu li.first-child a,
                                                                  #ww-menu li: first-child span,
                                                                  #ww-menu li.first-child span{
                                                                  background:#eee url(«img/ww-menu-first-child-span.gif») no-repeat 0 0;
                                                                  }

                                                                  а это вообще что-то страшное:
                                                                  body div ul ul,
                                                                  body div ul ol,
                                                                  body div ul menu,
                                                                  body div ul dl,
                                                                  body div ol ul,
                                                                  body div ol ol,
                                                                  body div ol menu,
                                                                  body div ol dl,
                                                                  body div menu ul,
                                                                  body div menu ol,
                                                                  body div menu menu,
                                                                  body div menu dl,
                                                                  body div dl ul,
                                                                  body div dl ol,
                                                                  body div dl menu,
                                                                  body div dl dl{
                                                                  margin-top: 0;
                                                                  margin-bottom: 0;
                                                                  }

                                                                  шаманство, не иначе. эдакий минирезет?
                                                                    0
                                                                    1. Я не учу как надо делать. Я предлагаю подумать ;)

                                                                    2. А мне надо ее обязательно решать? Пока вроде всё ок было у меня с наследованием в IE.

                                                                    3. А вы у валидатора спросите хаки ли это ;) На самом деле я написал такую инструкцию нормальному броузеру «никогда не применяй эти правила». Я же не виноват что IE меня не слушается ;)

                                                                      0
                                                                      1. гм… видимо меня переклинило…
                                                                      2. с таким вольным накладыванием стилей (наложим на всех детей, потом сбросим, потом опять..) скоро столкнёшься ;-)
                                                                      3. хаки и нарушения спецификаций — это разные вещи. хаки — это намеренное использование особенностей (то есть не фич, а именно особенностей, как правило — багов) конкретного браузера для достижения определённых целей.
                                                                        0
                                                                        1. Бывает.

                                                                        2. Ну вот как столкнусь, так сразу и напишу как решаю такие проблемы ;)

                                                                        3. Пребываю в глубочайшей уверенности что ни один здравомыслящий производитель броузеров не добавит в новой версии своего детища понимание селектора «* html». Это как то не по спецификации будет.
                                                                  +1
                                                                  насчёт резета.цсс — никогда не понимал маразма с перечислением всех тэгов. что мешает воспользоваться звёздочкой?
                                                                  Семантика вёрстки и мешает.

                                                                  Зачем убивать маржины у элементов, у которых маржинов не может быть в принципе?

                                                                  Было даже пару постов по поводу использования «звёздочки» в css:
                                                                  habrahabr.ru/blogs/webdev/34233/ и habrahabr.ru/blogs/webdev/28529/
                                                                    0
                                                                    у всех элементов могут быть марджины. так же как у всех элементов _может_ быть отображение. display: none означает не только, что элемент должен быть блоком, но и то, что он должен быть _отображён_ в виде блока. соответственно тут есть три стратегии:
                                                                    1. изначально всё скрываем, указывая конкретно, что отображать и как.
                                                                    2. изначально все отображаем как блок/инлайн, указывая конкретно, что бы хотим скрыть, а что отобразить инлайном/блоком.
                                                                    3. полагаемся на дефолты, указывая конкретно отображение чего нужно поменять.
                                                                      +1
                                                                      display: none означает не только, что элемент должен быть блоком, но и то, что он должен быть _отображён_ в виде блока.
                                                                      display: block?

                                                                      Говоря про отсутствие margin я, конечно, имел ввиду отсутствие вертикальных отступов у inline элементов.
                                                                      Конечно, мы можем сделать span'у display: block, и он будет отображаться в виде блока, со всеми вытекающими отсюда маржинами, но зачем?
                                                                        –1
                                                                        и задавая margin:0 мы подчёркиваем, что отступа у него быть не должно, чтобы там не думал какой-нибудь левый клиент.
                                                                • UFO just landed and posted this here
                                                                    +1
                                                                    Хорошая статья и работа ;) Еще тот джидай :)
                                                                    Только не смотри на свой сайт в браузерах ИЕ5, ИЕ5.5, ИЕ6 ;)
                                                                      +1
                                                                      Не мог не заметить косяк нарезки)) тень не совпадает с фоном и уголки тоже. Хорошо описал нашу работу)) особенно про сложности, я и правда люблю с ними сталкиваться и получаю моральное удовлетворение когда с ними справляюсь. Однако ни чего сложного в твоей верстке я не нашел) ограничивать себя 1 дивом как то глупо, в таком случае можно див заменить на что угодно и сверстать без таблиц и дивов, а прижать футер к низу это уже обычные будни верстальщика.
                                                                        0
                                                                        Я не понял, а в чем «пуля» использовать только 1.
                                                                        По-моему, если хотелось семантической верстки, то как раз логичнее бы было разбить все на отдельные блоки.
                                                                        А в IE6 вообще вылезли проблемы с фоном и подвалом.
                                                                          –4
                                                                          Вопрос к «мудрому джедаю» и всем, кто таковым себя считает
                                                                          приходилось ли ему когда-нибудь создавать макет с одинаковыми по высоте колонками? если да, хотелось бы взглянуть. и сразу оговорка: не «типа» одинаковой высоты, а ДЕЙСТВИТЕЛЬНО одинаковой.
                                                                            0
                                                                            автор респект ин евери аспект! мне очень понравилось
                                                                            Настоящие CSS- джедаи любят трудности. Правила хорошего тона заставляют их разносить в пух и прах очередную версию броузера Internet Explorer на форумах, но в реальности они любят IE. Ибо укрощение этого монстра тем и отличает мудрого джедая от падавана.
                                                                            и
                                                                            Мне необходимо было найти такое правило, которое позволяло бы разделить IE6.0 и IE7.0 при помощи CSS команды @import. Не надо спрашивать зачем мне это было надо. Допустим я сильно любопытный ;)

                                                                            ужасно красиво и весело, и нетривиально!
                                                                            мне очень приятно было читать и наслаждаться занимательными исследованиями автора, ибо сам люблю написать css позаковыристей :)
                                                                              0
                                                                              Отлично, я вот тоже задался вопросом: romanoza.habrahabr.ru/blog/45570/
                                                                              К сожалению, никто не ответил, как я написал в последнем комментарии.

                                                                              Only users with full accounts can post comments. Log in, please.