Еще со времен древнего HTML2 у нас появилась возможность семантически обозначать добавление и удаление информации, используя элементы <ins> и <del> соответственно. Несмотря на кажущуюся простоту, эти элементы имеют глубокий смысл, его мы рассмотрим в статье. Так же я хочу провести сравнение и сопоставление <ins> и элемента <s>, который был возвращён обратно в HTML5 из стилей шрифта.

Использование ins и del

Определения этих двух элементов очень просты:

• Элементы ins и del представляют собой изменения, сделанные в документе.
• Элемент ins представляет собой дополнение к документу.
• Элемент del представляет собой удаление из документа

Так о каких изменениях идёт речь? Вы можете использовать эти элементы для:

• Записи изменений в официальных документах, таких как протоколы собрания или законные акты.
• Пометки изменений в статье – в дополнение к журналистским корректировкам, что помогает сохранить редакционную целостность и избежать «переписывания материала».
• Обозначения различий между двумя версиями документа (разница), к примеру, для обозначения редакционных корректировок.
• Обозначения значительного добавления или удаления контента, о котором необходимо знать людям, читающим документ.

В некоторых случаях изменения должны быть точно обозначены. Однако стоит помнить, что если изменений много, то их обозначение становится непрактичным (или невозможным) – поэтому используйте эти элементы только в тех случаях, когда это действительно необходимо.

Условные границы параграфа

Элементы <ins> и <del> необычны тем, что они могут содержать фразаобразующий или потоковый контент (говоря языком HTML 4, они могут быть строчными (inline) или блочными (block-level)). Вот пример вставленного параграфа, содержащего удаление фразаобразующего контента:

See the Pen ImAFl by Andrey Siaglo (@webmolot) on CodePen.

Заметьте, что по умолчанию браузер отображает эти элементы как строчные, и для того, чтобы изменить стиль на блочный, Вам необходимо будет добавить display: block.

Также, нам необходимо убедиться, что каждый элемент <ins> или <del> является либо строчным, либо блочным, но никак не то и другое одновременно. Например, нельзя начать в середине одного параграфа, и закончить в середине следующего.

See the Pen beJxG by Andrey Siaglo (@webmolot) on CodePen.

Атрибуты datetime и cite

Элементы <ins> и <del> также могут содержать два дополнительных атрибута, datetime и cite. Datetime используйте для регистрации даты (и как вариант — времени) совершённого изменения. В атрибуте cite содержится URL-ссылка на более подробную информацию об изменении.

See the Pen GrAou by Andrey Siaglo (@webmolot) on CodePen.

Как правило, datetime и cite скрытые данные, но их можно сделать видимыми, предварительно украсив через css.

See the Pen suqAK by Andrey Siaglo (@webmolot) on CodePen.

Или даже лучше – можно добавить сноску, например:

See the Pen aFqgx by Andrey Siaglo (@webmolot) on CodePen.

Убедитесь в необходимости использования del при удалении контента. Возможно вам необходимо просто закомментировать контент посредством <!-- --> или удалить его из HTML источника.

Элемент s

В спецификации s описывается следующим образом:

Элемент представляет собой контент, который либо больше не является точным, либо больше не является актуальным.

Изначально, элементы s и его предшественник strike являлись элементами стиля шрифта. Они практически перестали использоваться в HTML 4 и совсем не используются в HTML 5. Однако, некоторые случаи семантического использования получили шанс на вторую жизнь. Например, для отметки первоначальной цены какого-либо товара на распродаже, а также обозначения окончания периода времени. К примеру, при продаже первой партии билетов на какое-либо мероприятие. Данный контент является источником полезной информации, поэтому удалять её мы не хотим. Однако мы хотим подчеркнуть, что данная информация более не является точной. Ещё один пример использования — это использование устаревшей, но всё ещё значимой информации, которая не является результатом редактирования.

Например, если бы элемент s использовался для Кикстартера, это могло бы выглядеть следующим образом:

s против del

Уверен, кто-то обязательно отметит в комментариях, что элемент s уже наступает на семантические пятки элемента del :)

Однако, существует едва различимая, но существенная разница. Элементы ins и del используются для отображения редакционных изменений и, как правило, это касается уже опубликованных страниц.

Элемент s используется для обозначения информации, которая уже не является точной, либо актуальной, однако, всё ещё является ценной.

Ян Хиксон описывает разницу таким образом:

Иными словами, посредством <del> получается документ, который не содержит <del> текст. А при использовании <s>, не может быть документа без <s> текста, потому что <s> текст всё ещё является частью документа, с той разницей, что он отмечен, как старый.

Оформление ins, del, и s

По умолчанию, стили браузера представляют собой следующее:

• <ins>: text-decoration: underline (пример)
• <del>: text-decoration: line-through (пример)
• <s>: text-decoration: line-through (пример)

Используемое по умолчание оформление ins очень похоже на обозначение ссылки. Что ещё хуже, используемые по умолчанию стили del и s — идентичны (несмотря на то, что их редко можно встретить вместе). Для понимания контекста необходимо визуально выделить эти элементы.

Фразаобразующий стиль ins и del

Вот некоторые стили, которые я использую для ins и del:

Стили ins

See the Pen gIkLe by Andrey Siaglo (@webmolot) on CodePen.

Стили del

See the Pen ypsGc by Andrey Siaglo (@webmolot) on CodePen.

Потоковый стиль ins и del

По умолчанию, элементы <ins> и <del> воспринимаются браузерами как строчные, и поэтому стилизуются соответствующим образом. Если Вы хотите использовать блочный стиль CSS, Вам необходимо будет применить display: block. Однако, визуального оформления, как в примере выше, для блочных элементов может быть недостаточно. Для них я использую следующие стили:

See the Pen cwqou by Andrey Siaglo (@webmolot) on CodePen.

Заключение

Итак, подведём итоги: мы рекомендуем Вам использовать <ins> и <del> для редактирования существующего документа, однако только в том случае, если обозначение изменений играет важную роль для тех, кто просматривает страницу. Используйте <s> для обозначения информации, которая более не актуальна или не точна, однако, удаление данной информации негативно скажется на смысле. Обязательно уделите внимание стилизации этих элементов во избежание путаницы. Наконец, заметьте, что <del> и <ins> могут использоваться для строчного или блочного контента (но не для того и другого одновременно), тогда как <s> может использоваться только для строчного контента.

Я заметил, что авторы часто забывают добавлять дату публикации к своим статьям, причём они потом вынуждены приложить немало усилий, чтобы эти статьи оставались актуальными. Если Вы делаете также, <del> и <ins> могут превратиться из редко используемых элементов в элементы, которые будут Вам очень полезны для обозначения изменений. Что касается <s>, то ему суждено оставаться одним из тех неясных, но полезных элементом, который Вам вряд ли когда-либо понадобится, но которому Вы всегда будете рады, если он будет у Вас в нужный момент.

Итак, что Вы думаете? Вы использовали данные элементы? А после прочтения статьи будете использовать? Предлагайте свои способы их стилизации. Оставляйте свои комментарии!

Оригинал: http://html5doctor.com/ins-del-s/

Когда мы хотим настроить окно браузера на нашем устройстве, мы, как правило, используем HTML тег <meta name="viewport">. Однако, как ни странно, мета-тег не является «нормативным» — его нет в официальном стандарте W3C.

Мета-тег viewport был впервые внедрён компанией Apple в iPhone, а затем и другими поставщиками браузеров. Сегодня он широко используется благодаря популярности iOS, Android и других платформ для планшетов и смартфонов.

Так как мета-тег viewport предназначен исключительно для настройки разметки, можно сказать, что он по праву относится к CSS. Именно поэтому W3C стремится стандартизировать новый метод адаптации, при котором управление окном переносится из HTML в CSS.

CSS правило @viewport

С новым правилом @viewport мы имеем то же самое управление окном, что и с мета-тегом, за исключением того, что такое управление осуществляется исключительно через CSS. Также как и при использовании мета-тега, рекомендуется устанавливать ширину окна браузера, используя не зависимую от устройства device-width:

@viewport {
  width: device-width;
}

На сегодняшний день @viewport используется программистами для “snap mode” в IE10 – функция Windows 8, позволяющая работать в мультиоконном режиме. Как ни странно, IE10 игнорирует мета-тег, если размер окна менее 400 пикселей, что приводит к невозможности оптимизации сайтов, использующих этот мета-тег, к таким маленьким окнам. Чтобы это исправить, программисты должны использовать упомянутый выше параметр device-width, или определить правило @viewport  в медиа-запросе.

Использование @viewport в медиа-запросах

Мы можем использовать @viewport в медиа-запросах. Например, следующий медиа-запрос используется для настройки разметки окна шириной менее 400 пикселей (например, мультиоконный режим в IE10) на ширину 320 пикселей.

@media screen and (max-width: 400px)
  @-ms-viewport { width: 320px; }
  ...
}

В данном примере, если устройство настроено на диапазон разрешения от 640 до 1024 пикселей, правило @viewport масштабирует окно до 640 пикселей.

@media screen and (min-width: 640px) and (max-width: 1024px) {
   @viewport { width: 640px; }
   ...
}

Новые дескрипторы @viewport

Несмотря на то, что мы можем управлять функцией увеличения и масштабирования, некоторые свойства viewport  – или как их сейчас называют «дескрипторы» - всё же изменились.

zoom

Дескриптор zoom  – это эквивалент initial-scale в мета-теге. Также как и minimum-scale и maximum-scale, существуют дескрипторы для max-zoom и min-zoom:

@viewport {
  width: device-width;
  zoom: 2;
}

user-zoom

Дескриптор user-zoom  эквивалентен параметра user-scalable

@viewport {
  width: device-width;
  user-zoom: fixed;
}

Поддержка браузерами

На сегодняшний день css правило @viewport поддерживается только Opera и IE10. Похоже на то, что скоро Chrome и другие браузеры будут его внедрять, т.к. ожидается, что вскоре данный мета-тег станет новым официальным веб-стандартом.

Пока что к правилу @viewport  необходимо добавлять вендорный префикс:

@-ms-viewport {
  width: device-width;
}
@-o-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}

Конечно же, нам до сих пор необходимо включать мета-тег viewport в html страницу, т.к. в ближайшее время он никуда не денется. Но уже не так страшно смотреть в будущее – добавление правила @viewport всего лишь делает наши сайты и приложения future-friendly.

Оригинал: http://blog.teamtreehouse.com/thinking-ahead-css-device-adaptation-with-viewport

Нет предварительного анализа макета сайта

Прежде чем приступить к написанию css кода, проанализируйте макет сайта. При необходимости нарисуйте на бумаге схему, согласно которой будете верстать. Это поможет понять поведение различных элементов на странице. Вы сэкономите время на исправление ошибок уже при написании кода.

Использование для фона больших изображений

Часто разработчики используют для фона большие  CSS изображения. Если есть возможность, используйте небольшое изображение и делайте для него repeat в CSS.

Использование большого количества CSS файлов

Это пустая трата сил и времени, к тому же использование большого количества файлов css плохо сказывается на  производительности. Использование нескольких CSS файлов в небольших и средних проектах усложняют работу html-верстальщикам. Необходимо вносить изменения в каждый отдельный документ. Количество файлов ухудшает производительность браузера, так как делается отдельный запрос для каждого файла. Старайтесь использовать  один или два CSS файла.

Игнорирование сокращений в коде

Сокращенный код ускоряет общую обработку страницы. Простой пример сокращённого написания:

• padding:5px 10px 0; правильно
• padding:5px 10px 0 10px; неправильно

Сокращения также можно использовать для fonts, margins и borders.

Не использование комментариев

Часто в большом количестве кода можно легко запутаться, да и трудно вспомнить логику определенного фрагмента кода,  сделанного несколько дней назад. Именно комментарий поможет участникам проекта быстро восстановить логику, просмотрев всю проделанную работу.

Применение излишней анимации

Не стоит злоупотреблять анимацией, т.к. это сделает загрузку как CSS, так и страницы в целом, намного медленнее. Используйте анимацию только в случаях необходимости.

Пробелы

Вес css файла можно значительно уменьшить, если оптимизировать код и удалить лишние пробелы.

Валидация кода

Сайт может работать и без проверки кода на валидность, но лучше сразу проверять и устранять ошибки в коде, чтобы избежать серьёзных нарушений в работе сайта в будущем.

Оригинал: http://blog.pixelcrayons.com/css/what-to-avoid-while-creating-css/

Что такое :nth-child()

nth-child(N) —  это псевдокласс селектора, который может быть применен к любому N элементу селектора, все что нам нужно сделать, это указать N.

li:nth-child(n) {
   background-color: #ccc;
}

Поддержка браузерами :nth-child()

• IE9+
• Chrome 1.0+
• Opera 9.6+
• Safari 3.1+
• Firefox 3.6+

Возможности использования

1. Числовые (N) значения

   ‘N’ может быть любое число. Это порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с первого (1) элемента в списке.

2. Чётные (even) и нечётные (odd) элементы

   Если необходимо обратиться к чётным элементам,  то теперь вместо порядкового номера можно использовать слово even, а для нечётных odd.

3. Написание формулы

   Чтобы изменить каждый четвёртый элемент, воспользуемся формулой ‘xn+y’, где x —  шаг, n — это счётчик, который автоматический принимает значение 0, 1, 2…., а  y — это порядковый номер элемента, с которого мы хотим начать. Если y = 0, то он не указывается и число отсчёта равно x.

Посмотреть примеры

Подводим итог

Псевдокласс nth-child() делает работу верстальщика более универсальной. nth-child() позволяет обойтись без статических классов в списках и таблицах. Псевдокласс позволяют верстальщикам во многих случаях обходиться без javascript.

Разработчики Internet Explorer 11 позиционируют свой браузер, как лучший браузер для работы с различными устройствами и разрешениями экрана. Среди основных преимуществ браузера перечисляются такие, как повышенная производительность, более быстрое время загрузки страниц и поддержка новых стандартов. IE11 на Windows 7 уже сегодня доступен для скачивания на сайте http://www.modern.ie/en-us.

Производительность и безопасность

IE11 предлагает новые возможности для улучшения реальной производительности web-сайта.

IE11 является первым браузером со встроенным декодером JPG изображений в режиме реального времени на графическом процессоре (GPU). Это способствует более быстрой загрузке страницы и снижению энергопотребления.

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

IE11 также поддерживает HTML5 технологии предварительной выборки ссылок и предварительного рендеринга страниц, так что разработчики могут указывать браузеру, какие страницы загрузить заранее.

Разработчики браузера подготовили много интересных тестов с примерами графически-насыщенных интерактивных веб-сайтов и 3D технологий. Можно проверить производительность браузера с помощью тест-драйва LiteBrite. В этом тесте проверяется скорость обработки HTML5, CSS и JavaScript.

Большое достижение разработчиков Internet Explorer 11 — это высокая производительность JavaScript интерпретатора с сохранением совместимости и безопасности. Согласно результатов тестов WebKit SunSpider, IE11 лидирует по производительности JavaScript по сравнению с последними версиями других браузеров. В Windows 7, IE11 на 4% быстрее, чем Internet Explorer 10, и почти на 30% быстрее, чем ближайшие конкуренты браузера.

3D графика

Internet Explorer 11 поддерживает новую web-технологию WebGL, которая позволяет разработчикам создавать новые виды современных 2D и 3D-решений посредством GPU. Например, GlacierWorks, некоммерческий проект о последствиях изменения климата в гималайском регионе использовал WebGL.

Инструменты разработчика F12

В IE11 появился новый набор инструментов для разработчика F12, который помогает диагностировать и оптимизировать сайты. С новой панелью разработчика будет проще:

• диагностировать и устранять проблемы с производительностью;

• работать с DOM и CSS

• отлаживать JavaScript без обновления страницы

Все возможности новой панели инструментов

Как себя покажет IE11 в работе время покажет. Остается надеяться, что совсем скоро в арсенале верстальщиков останутся только самые передовые современные браузеры, которые будут поддерживать все стандарты.

Техническое задание по верстке нужно для того, чтобы:

1. Обеим сторонам:
   • - представить (вообразить) готовую верстку
   • - выполнить пошаговую проверку готовой верстки
   • - уменьшить число ошибок, связанных с изменением требований
2. Заказчику:
   • - осознать, что именно ему нужно
   • - требовать от исполнителя соответствия всем условиям, оговорённым в ТЗ
3. Исполнителю:
   • - понять суть задачи
   • - составить план выполнения проекта и работать по нему
   • - отказаться от выполнения работ, не указанных в ТЗ.

Техническое задание можно разделить на два раздела:

1. Основные требования к верстке
2. Специальные требования заказчика

Основные требования к верстке

В этом разделе необходимо раскрыть общие вопросы, которые описывают вашу схему работы, а так же основные правила верстки. Сюда можно писать всё, о чем заказчик может не знать, в силу своей некомпетентности по вопросам верстки. Эти вопросы универсальны и могут относиться ко всем проектам, поэтому с каждым новым проектом раздел можно дополнять и совершенствовать новыми правилами. Основные требования к верстке можно свести в следующий список:

1. Верстка страниц сайта визуально должна соответствовать макетам заказчика. Допустимы небольшие визуальные расхождения верстки с макетами. Если верстка должна быть выполнена “пиксель в пиксель” с макетом, заказчик должен указать это требование в разделе “Специальные требования заказчика”.

2. Макеты должны быть выполнены в формате psd и соответствовать основным правилам “хорошего тона в Фотошопе”. Если макеты psd не соответствуют правилам, исполнитель может запросить у заказчика привести их в соответствие с требованиями.

3. Сверстанные макеты должны предоставляться в виде страниц html и прилагаемых файлов (css, изображений, js и др.). В оговоренный срок исполнитель должен выслать заказчику ссылки на рабочие страницы, по которым заказчик будет проверять соответствие верстки всем требованиям. После утверждения верстки заказчиком, исполнитель должен выслать архив с версткой.

4. Верстка должна одинаково хорошо отображаться в следующих браузерах: IE 9+, FF 3+, Opera10+, Chrome 1+, Safari 3+. Если нужна поддержка других браузеров (их версий), необходимо указать это в специальных требованиях заказчика к верстке.

5. Минимальное разрешение страниц сайта, при котором не будет появляться горизонтальная полоса прокрутки, должно быть равным 1000px. При адаптивной верстке горизонтальная полоса прокрутки может появляться только при разрешениях меньше 360px.

6. При необходимости, в верстке должны использоваться возможности стандарта CSS3 такие как, закругление углов блока, градиентная заливка, тень, прозрачность и другие. Если версия браузера не поддерживает некоторые свойства CSS3, внешний вид страницы может отличаться. Отличия могут быть следующие: прямые уголки блока вместо закругленных, сплошная заливка цветом вместо градиентной, отсутствие тени у блока или текста, отсутствие прозрачности у блока или текста.

7. Изображения на сайте, которые отвечают за дизайн страницы, должны быть оптимизированы для просмотра в интернете. Изображения, которые отвечают за наполнение сайта информацией, не оптимизируются. Например, изображения товаров в каталоге, изображения в фото-галерее и другие.

8. Исполнитель не должен прописывать адреса для абсолютных и относительных ссылок, если это не оговаривалось с заказчиком в разделе “Специальные требования заказчика”. По умолчанию, все ссылки должны ссылаться на текущую страницу.

9. Если заказчиком предусмотрены динамические изменения элементов сайта при наведении или нажатии курсором мыши, они должны оговариваться в специальных требованиях к верстке. К динамическим изменениям относятся: движение, увеличение, появление и исчезновение, поворот, отсвечивание и отражение, увеличение и уменьшение, скругление, фокус, размытие, изменение цвета и яркости.

10. Заполнение страниц сайта контентом (текстом, картинками и др.) выполняется заказчиком. Исполнитель должен наполнить страницы только тем контентом, который находится в psd макете и необходим для тестирования верстки. Если текст в psd макете нельзя выделить и скопировать, верстальщик может вставить любой другой текст для тестирования верстки.

11. Исполнитель в праве сам выбирать оптимальные языки разметки и программирования, а так же инструменты для выполнения верстки сайта, если это не оговорено в разделе “Специальные требования заказчика”.

12. Если на сайте используются нестандартные шрифты, заказчик должен передать исполнителю исходники шрифтов в формате TTF. Если исходник не будет предоставлен, исполнитель вправе заменить шрифт на другой.

13. Динамические медиафайлы, приложения и виджеты не интегрируются в верстку, если это не оговаривается заказчиком в специальных требованиях и если заказчик не предоставит исходники. По умолчанию используется статическое изображение.

14. HTML и CSS код должен проходить проверку на соответствие стандартам W3C по валидности. Исключения могут составлять ошибки, возникающие из-за свойств CSS3, т.к. эти свойства не поддерживаются валидатором.

Специальные требования заказчика

Второй раздел очень важный. В нем должны быть раскрыты все вопросы по текущему проекту. Обсуждение удобно проводить в виде диалога с заказчиком по skype, icq или google talk. История переписки будет являться основой для составления этого раздела.

Схема диалога может выглядеть так:

1. вы открываете макет с дизайном главной страницы и проводите взглядом по нему сверху-вниз, воображая, что верстаете эту страницу.
2. если взгляд задержался на каком-то элементе и вам не совсем понятно, как его верстать — задаете вопрос заказчику. Для удобства можно сопровождать вопросы мгновенными скриншотами, воспользовавшись сервисом droplr.com.
3. после обсуждения главной, вы открываете следующую страницу и делаете тоже самое. Таким образом вы должны мысленно сверстать все без исключения страницы для верстки. В результате у вас должно сложиться точное представление того, что хочет заказчик, а у заказчика — представление того, что он от вас получит.

Подводим итог

После того, как техническое задание составлено, и обе стороны его утвердили (согласились со всеми пунктами), можно приступить к окончательной оценке проекта. Только сейчас верстальщик может точно определить объем и сроки предстоящей работы, а заказчик точно знает, за что он будет платить деньги. Только сейчас верстальщик может сосредоточиться на своем любимом занятии, а заказчик может спокойно ждать верстку своего сайта.

В процессе работы всё же могут возникать какие-то вопросы, которые не оговаривались в техническом задании. Однако, изначально заданный спокойный конструктивный тон ведения переговоров будет способствовать благоприятному их решению.

Так нужно ли тратить время на составление технического задания? Как должно выглядеть идеальное техническое задание? Ваши мысли и предложения пишите в комментариях.

Авторам проекта желаю успехов и стремительного развития. Побольше интересных интервью с известными веб-разработчиками.

1) как научиться верстать как webmolot?

Чтобы научиться верстать как webmolot, нужно много верстать и делать это с удовольствием.

2) можно ли обращаться к Вам время от времени за советом по верстке?

Можно. Для этого на сайте есть специальная форма вопрос-ответ. Письма приходят ко мне на почту. Отвечать на них стараюсь, по возможности, быстро.

3) работали ли вы у Лебедева?

Не работал.

4) Добрый день, верстаю сайт. Во всех браузерах всё хорошо, а в ie6 всё плохо. Помогите, пожалуйста, я вам заплачу и буду всем своим друзьям советовать.

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

5) Хочу заказать у вас верстку. За сколько сделаете?

Сделаю за дорого! Если хотите поточнее, то присылайте макет на оценку.

6) Добрый день! Андрей, я очень начинающий новичок, поэтому не ругайте за такой вопрос пжл) … дальше много текста

Ну как я вас могу ругать? Если Вы решились написать мне, тогда Вы уже молодец! Если написали более менее внятный вопрос, еще лучше. Но давайте договоримся, прежде чем спрашивать, как выравнять картинку по центру блока, введите этот запрос в поисковике :)

7) Привет. Я директор компании X… Хочу предложить сотрудничество. Компания находится в тройке лучших студий рунета. … как правило еще на пол страницы текста о заслугах компании и о том, какие они крутые, а в конце скромно. Оцени, пожалуйста, макет на верстку. Только с учетом того, что бюджет на него ограниченный и платить мы много не сможем.»

Мне приятно работать с крутыми компаниями, потому что, как правило, у них серьезный подход к работе, красивый дизайн, хорошее ТЗ. Однако, стоимость услуг для всех заказчиков у меня одна. С постоянными заказчиками работаю без предоплаты, думаю, это лучше любой скидки.

8) Можно попросить у вас макетик потренироваться верстать.

Макеты, которые присылают мне заказчики на оценку, находятся только у меня и больше ни у кого.

9) Хочу заказать у вас создание сайта под ключ. Нужен дизайн, верстка, CMS.

Специализируюсь исключительно на верстке сайтов. Это не значит, что я не умею рисовать и интегрировать верстку с CMS. Умею и иногда делаю проекты под ключ для друзей и только для них.

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

Вы по адресу, я ищу хорошего верстальщика, даже трех хороших верстальщиков. Почитайте статью на эту тему.

11) Привет! Я цепляю сайты на CMS, верстка не мой конек. Можем ли мы сотрудничать с тобой и совместно делать сайты для заказчиков.

Да, можем. Я всегда открыт для интересных предложений. Основные условия, это профессиональное исполнение своей работы и соблюдение сроков.

Если у Вас появились вопросы ко мне, задавайте их в комментариях или через форму вопрос-ответ. Так же вы можете задать любой вопрос анонимно вот здесь.

Но как ни странно, иногда эти самые неприятные баги могут приятно удивить верстальщиков, заставить их подскочить с кресла и воскликнуть: «Это не баг, это фича!»

Не все баги одинаково бесполезны

Давайте вспомним те багофичи браузеров, которые могут быть в некоторых ситуациях полезны при верстке. Думаю, ни у кого не возникнет сомнения, что лидер в этой номинации — старичок IE6. Ну хоть в чем то он преуспел ;)

1. Position:fixed в ie6

Если блоку назначить свойство overflow со значением auto или scroll, а его дочернему элементу прописать position:relative, то дочерний элемент будет оставаться на месте при прокрутке родителя. А так как IE6 не поддерживает значение fixed, то этот баг можно считать отличной фичей. Есть много ситуаций, где он может быть полезен. Например, когда нужно фиксировать шапку сайта вверху страницы.

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

2. !important в ie6

В примере про футер я рассказывал про то, что IE6 живет по закону «кто последний тот и папа», а на свойство !important он забивает.

height:auto !important; height:100%;

Такой код он поймет по своему и установит высоту в 100%, а все другие браузеры это значение проигнорируют. Существует масса других хаков для «ослика». Но этот способ хорош тем, что он валидный. Думаю, его так же можно считать фичей.

3. Min-height в ie6

Как известно, ie6 не поддерживает min-height. Это свойство незаменимо, когда необходимо выполнение следующих условий:

• высота блока должна определяться высотой контента
• если контента мало, высота блока должна фиксироваться

Но, к счастью, у шестерки есть проблемы со свойством height, когда контент, который не вмещается в блок с заданной высотой, не выходит за границы блока, а растягивает этот блок. Поэтому можно спокойно писать height вместо min-height, и это свойство будет определять минимальную высоту в ie6. Это же правило работает в ie6 и для свойства min-width

4. Margin:auto в ie6

В ie6 нельзя выровнять блок по центру, прописав к нему margin:auto. Но, к счастью, у него есть полезная багофича со свойством text-align — это свойство работает не только для текста, но и для блоков внутри контейнера, которому задается свойство. Таким образом, задав для контейнера text-align: center, мы сможем выровнять внутренние блоки по центру контейнера.

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

Обязательные требования:

1. Чистый HTML и CSS, никаких javascript, expression, условных комментариев и др.
2. Верстка кроссбраузеная IE5.5 +, FF2.0 +, Opear 9.0 +, Safari, Chrome
3. Валидный код HTML и CSS для Doctype HTML5, XHTML 1.0 Strict, XHTML 1.0 Transitional
4. Минимальный HTML и CSS

Какое практическое применение этого задания?

Например, для установки на сайт кнопки онлайн чата. Ее можно вынести в отдельный блок, который будет всегда на виду. Или для поддержания обратной связи с пользователями сайта, как это делают сервисы www.uservoice.com и www.reformal.ru

Чтобы всегда быть в курсе предстоящих конкурсов, подпишитесь на E-mail рассылку. Сделать это можно через специальную кнопку в блоке Подпишитесь!, который находится вверху сайдбара

Успехов! Награда ждет своего победителя!

Правила конкурса

P.S. с заданием конкурса довольно быстро справились, поэтому я добавил бонус к заданию. Думаем, решаем, виртуозничаем ;)