Устойчивый HTML + CSS

s0rr0w · September 12, 2012

На киевском оффлайн форуме разработчиков подымалась тема устойчивой верстки. Что означает этот термин? Это верстка, при которой минимальны затраты на дальнейшие модификации и изменения, замена каких-то частей на другие не вызывает проблем с визуальным отображением. Именно так выглядит счастье кодера.

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

Формат такой: вы верстаете макет, мы совместно тестируем его на устойчивость, определяя негативные и позитивные стороны, вы его дорабатываете и снова представляете публике. Лучше всего выкладывать код на http://jsfiddle.net

Обратите внимание на то, что в нижнем блоке, между вторым Header и текстом первого абзаца расстояние больше, чем между первым Header и краем блока. Пиксельперфекционизмом заниматься не нужно.

Кроссбраузерность - под самые свежие браузеры.

Сроки - пока не добьемся приличного результата.

Победителей в этом конкурсе не будет, так как все обретут ценный опыт.

Убедительная просьба всех присутствующих на прошлом собрании не подсказывать.

Edited September 12, 2012 by s0rr0w

Helis · September 12, 2012

Занятно. А требования к кроссбраузерности есть? Вон эти уголки круглые должны, скажем, в восьмом IE быть или фиг с ним?

Или я, задав этот вопрос, уже провалил задание :-D?

sigma77 · September 12, 2012

s0rr0w,

А по срокам что?

Когда будут подводится результаты?

s0rr0w · September 12, 2012

Обвновил начальный пост. Продублирую тут

Кроссбраузерность - под самые свежие браузеры.

Сроки - пока не добьемся приличного результата.

sigma77 · September 12, 2012

s0rr0w,

Т.е. каждый ведет свою ветку? Или кто первый выложил, та верстка и дорабатывается?

lexxcode · September 12, 2012

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

s0rr0w · September 12, 2012

s0rr0w,
Т.е. каждый ведет свою ветку? Или кто первый выложил, та верстка и дорабатывается?

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

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

Абсолютно верно понял.

Зачем использовать

<div class="h2">Header</div>

вместо

<h2>

?

Тестирование на изменения

1. Удаление

<div class="box-side"><img src="http://storage8.static.itmages.ru/i/12/0912/h_1347451504_5022739_0322d95da9.png" alt=""></div>

не пройдено

2. Текст без абзацев в блоке пройдено

3. Несколько абзацев подряд пройдено

4. Таблица после абзаца не пройдено

5. расстояния между h2 и текстом не соответствует задуманному

http://jsfiddle.net/9b988/5/

lexxcode · September 12, 2012

Зачем использовать
<div class="h2">Header</div>
вместо
<h2>
?

Потому, что по факту я понятия не имею что это за элемент, это может быть и h2, h1, h3 и что угодно еще в том числе и просто блок

1. Удаление

<div class="box-side"><img src="http://storage8.static.itmages.ru/i/12/0912/h_1347451504_5022739_0322d95da9.
png" alt=""></div>

не пройдено

полагаю проблема с отступом слева

4. Таблица после абзаца не пройдено

да есть такое

5. расстояния между h2 и текстом не соответствует задуманному

значит я не понял как задумано

обновил

Пожалуй так даже лучше

s0rr0w · September 12, 2012

http://jsfiddle.net/9b988/12/

1. Тест вложенности - не пройден.

2. Тест устойчивости закругления углов - не пройден

http://jsfiddle.net/9b988/13/

3. Тест на устойчивость к множеству "параграфов" в блоке с "?" не пройден

lexxcode · September 12, 2012

1. Тест вложенности - не пройден.

ок

2. Тест устойчивости закругления углов - не пройден

в общем-то нет описания поведения в других ситуациях. ну ок. сделал как понимаю, хотя на практике уже добавлял бы дополнительный класс для .block-info

3. Тест на устойчивость к множеству "параграфов" в блоке с "?" не пройден

так простите


<div class="box clearfix">
    <div class="box-side">
        <img src="http://***.png" alt="">
    </div>
    <div class="box-base clearfix">Lorem ipsum</div>
</div>

это неделимый элемент .box-base вне .box не имеет смысла так же как и .box-side

UPD:обновление забыл

s0rr0w · September 12, 2012

так простите
это неделимый элемент .box-base вне .box не имеет смысла так же как и .box-side

Считаем, что я видел твой код первый раз, у меня IQ < 30, мне было впадлу разбираться, и я решил несколько наговнокодить

Тест устойчивости на изменения не пройден.

lexxcode · September 12, 2012

Алекс так просто не сдается

sigma77 · September 12, 2012

Дядя s0rr0w,

Критикуй - http://jsfiddle.net/3hngy/ :blush:

s0rr0w · September 12, 2012

Алекс так просто не сдается

Годится. Может у кого-то есть вариант, как этот "дом труба шатать"?

Дядя s0rr0w,
Критикуй - http://jsfiddle.net/3hngy/

1. Расстояние между текстом и .tips_wrapper слишком большое. Недочет

2. Тест на прибивание H2 не пройден

3. Тест на добавление inline-текста не пройден

4. Тест на inline-контент в .tips_wrapper не пройден

5. Добавление таблицы после первого параграфа пройдено

http://jsfiddle.net/3hngy/1/

amelice · September 12, 2012

я тоже хочу критики.

http://jsfiddle.net/QCnrH/5/

s0rr0w · September 12, 2012

я тоже хочу критики.
http://jsfiddle.net/QCnrH/5/

http://jsfiddle.net/QCnrH/7/

1. Тест на inline-text пройден частично

2. Тест на устойчивость к мультипараграфам в .question не пройден

3. Тест на таблицу не пройден

4. Тест на закругления блока .question не пройден

Burevestnik · September 13, 2012

Не знаю актуально еще или нет, но все же мой вариант http://jsfiddle.net/ZYPsb/

s0rr0w · September 13, 2012

Не знаю актуально еще или нет, но все же мой вариант http://jsfiddle.net/ZYPsb/

Актуально, актуально.

http://jsfiddle.net/ZYPsb/1/

1. Тест на инлайн-текст пройден частично

2. Тест на вложенность не пройден

3. Тест на устойчивость к удалению картинки пройден

amelice · September 13, 2012

Дубль 2. :blink:

http://jsfiddle.net/VRAWc/

Burevestnik · September 13, 2012

1. Тест на инлайн-текст пройден частично

Я правильно понимаю что проблема в этом блоке

<div class="lightgrey">
            <div class="content">
                <p>test</p>
                test
            </div>
        </div>

т.е. нет отступа нижнего у тега <p>?

2. Тест на вложенность не пройден

Если проблема была в картинке то поправил http://jsfiddle.net/ZYPsb/2/

Если проблема не в этом, то скажи как должно быть.

mishka · September 13, 2012

1. Тест на инлайн-текст пройден частично
Я правильно понимаю что проблема в этом блоке
<div class="lightgrey">
            <div class="content">
                <p>test</p>
                test
            </div>
        </div>
т.е. нет отступа нижнего у тега <p>?

Не ставь размер текста на <p />. Избегай такого. Так как текст не обязательно в параграфе будет.

Great Rash · September 13, 2012

Ну и я чтоль попробую... http://jsfiddle.net/GreatRash/6VTQL/2/

_{(из-за того, что я посмотрел все юзкейсы, которые не были описаны вначале, мне проще)}

Burevestnik · September 13, 2012

1. Тест на инлайн-текст пройден частично
Я правильно понимаю что проблема в этом блоке
<div class="lightgrey">
            <div class="content">
                <p>test</p>
                test
            </div>
        </div>
т.е. нет отступа нижнего у тега <p>?
Не ставь размер текста на <p />. Избегай такого. Так как текст не обязательно в параграфе будет.

Насчет размера текста не понял, не могли бы пояснить? У меня вроде бы нигде не указан размер текста для тега <p>

mishka · September 13, 2012

Насчет размера текста не понял, не могли бы пояснить? У меня вроде бы нигде не указан размер текста для тега <p>

Извини, чет я напутал )

s0rr0w · September 13, 2012

Дубль 2.
http://jsfiddle.net/VRAWc/

http://jsfiddle.net/VRAWc/1/

1. Инлайн-текст не пройден


 <h2 class="header">Header</h2>
    test
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas libero nostrum ad fugit iusto. Aliquid itaque
      voluptatibus libero ut in dolorem ab maiores fugit at sunt numquam fuga incidunt? Repudiandae.
    </p>
    test

2. Знак вопроса должен отодвигать контент вправо

Я правильно понимаю что проблема в этом блоке
т.е. нет отступа нижнего у тега <p>?

Да

Если проблема была в картинке то поправил http://jsfiddle.net/ZYPsb/2/
Если проблема не в этом, то скажи как должно быть.

Закругление углов

Ну и я чтоль попробую... http://jsfiddle.net/GreatRash/6VTQL/2/
_{(из-за того, что я посмотрел все юзкейсы, которые не были описаны вначале, мне проще)}


<section class="b-block">
    <article class="b-article">
        Header
    </article>
</section>

http://jsfiddle.net/6VTQL/3/

Текст мелковат как-то...

Sign In

Устойчивый HTML + CSS

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information