s0rr0w

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

Recommended Posts

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

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

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

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

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

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

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

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

post-218-0-46104500-1347445355.png

Edited by s0rr0w

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

s0rr0w,

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

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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

<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 и текстом не соответствует задуманному

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

обновил

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

Share this post


Link to post
Share on other sites

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:обновление забыл

Share this post


Link to post
Share on other sites

так простите

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

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

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

Share this post


Link to post
Share on other sites

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

Дядя s0rr0w,

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

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

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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/

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,452
    Total Members
    3,128
    Most Online
    rhouland
    Newest Member
    rhouland
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.