О HTML верстке существует непомерное количество талмудов, учебников, уроков и статей. Конкретно моя статья посвящена некоторым тонкостям, с которыми приходится сталкиваться во время верстки новых проектов. Почему и откуда вообще возникают эти тонкости? В основном из-за отсутствия знаний, не желания их применять или просто лени использовать семантическую структуру документа и соответствующие HTML-теги из спецификации W3C. Именно эти мелочи пополняют исходный код ненужной кучей, захламляющих строк, что в свою очередь приводит к увеличению времени загрузки странички. Так вот, чтобы избежать неприятных моментов во время работы над новым проектом я и написал эту статью.
1. Верстка галерей
Галереи изображений или видео с подписями (caption), присутствует буквально на каждом сайте. Для их создания я настоятельно рекомендую использовать список определений — DL:
<div id="gallery"> <dl> <dt><img src="img/some-img.jpg" alt="" /></dt> <dd>Картинка номер 1</dd> </dl> <dl> <dt><img src="img/some-img.jpg" alt="" /></dt> <dd>Картинка номер 1</dd> </dl> <dl> <dt><img src="img/some-img.jpg" alt="" /></dt> <dd>Картинка номер 1</dd> </dl> <dl> <dt><img src="img/some-img.jpg" alt="" /></dt> <dd>Картинка номер 1</dd> </dl> </div>
Добавим чуть стилей, чтобы изображения с подписями располагались в две колонки:
#gallery dl { float: left; width: 48%; margin-right: 4%; } #gallery dt { border: 1px solid #f9f9f9; padding: 2px; background: #fff; } #gallery dd { text-align: center; color: #444; }
А в конце добавим небольшой скрипт JS который будет убирать отступ справа у каждого второго элемента:
<script type="text/javascript"> jQuery('#gallery').find('dl:nth-child(2n)').css({'margin-right':'0'});
В итоге получаем отличную кроссбраузерную галерею.
2. Псевдоэлемент :first-child
:first-child
— это волшебный псевдоэлемент, который работает для первого элемента какого-нибудь блока или списка. Почему он? Я постоянно его использую потому, что в отличии от :last-child
, браузер ИЕ-7 его поддерживает. Пользуюсь им при стилизации списков:
.list li { border-top: 1px solid #e8e8e8; padding: 5px 0; } .list li:first-child { border-top: none; }
3. Псевдоэлемент :first-letter
Так же поддерживается браузером ИЕ-7, что очень радует. Основное назначение этого псевдоэлемента — стилизация первой буквы абзацев или заголовков, или чего Вам в голову прийдет. В стилях применяется так:
p:first-letter { font: bold 14px Helvetica; color: #ff0000; } h2:first-letter { font: normal 30px Helvetica; color: #006699; }
И получаем красивую первую буковку.
4. Сбрасываем обтекание (float)
Как Вы могли заметить из первого примера, мы делали галерею в две колонки, с помощью правила CSS float. Это правило довольно плотно вжилось в современную верстку, но чтобы его применять нужно понимать, что если обтекание элемента не сбросить, то это правило будет ламать Ваш проект. Ну, и нужно иногда стилизировать родителя плавающего элемента, а если у родительского блока все элементы плавающие, то он имеет нулевую высоту, а если добавить ему рамку, то увидим льшь одну сплошную линию.
Так вот, чтобы избавиться от этой неувязки, нужно использовать корректный сброс обтекания: он заключается в добавлении за последним плавающим элементом пустого дива с классом clear:
<div class="clear"></div>
А в файле стилей нужно добавить такие правила для этого класса:
.clear { clear: both; height: 1px; margin-top: -1px; }
Теперь можно стилизовать родителя на Ваш вкус и цвет)
5. Вставка flash в HTML страницу
Этот пункт я пишу в первую очередь для себя, потому, что запомнить наизусть это нереально. Приходится гуглить или смотреть старые проекты, а написав, буду подсмаривать сюда:
<object> <EMBED pluginspage='http://www.macromedia.com/go/getflashplayer' src='swf/some-flash.swf' width='120' height='150' type='application/x-shockwave-flash' wmode="transparent" menu="false" quality="high"> </EMBED> </object>
Имейте ввиду, что нужно указать правильный путь (src) к SWF файлу, ширину (width) и высоту (height).
И запомните, что разные браузеры по разному интерпретируют положение вашей вставки, поэтому желательно обрамлять флэш-вставку в контейнер и для точности макета с шириной и высотой флэша нужно будет поиграться. Для ИЕ7 нужно использовать хаки CSS.
6. Прибиваем footer к низу страницы
Этот трюк просто должен присутствовать, если на странице только один или два абзаца текста, а подвал подпрыгивает вверх и просто неприятно на такие дела смотреть, тогда несколько строк CSS решают эту проблему навсегда.
Стандартная структура страницы:
<!Doctype HTML> <html> <head>...</head> <body> <div id="header"></div> <div id="main"></div> <div id="footer"></div> </body> </html>
Ну и совсем немного стиля для футера:
html { height: 100%; } body { position: relative; padding-bottom: 200px; height: 100%; } #footer { position: absolute; bottom: 0; left: 0; width: 100%; height: 180px; background: #f0f0f0; }
И все круто работает.
7. Кроссбраузерный inline-block
Благодаря правилу inline-block
строчный элемент можно сделать блочно-строчным, а строчный — строчно-блочным))). Это свойство очень удобно использовать при стилизации практически любых элементов на странице. Работает отлично, великолепная альтернатива обтеканию (float
).
Но, есть один нюанс: не все браузеры его понимают, поэтому нужно писать все корректно, вот так:
.someBlock { display: inline-block; vertical-align: top; width: 200px; height: auto; margin-right: -4px; zoom: 1; *display: inline; }
8. Создаем самое простое модальное окно
Модальные окна — это всплывающие (выпадающие / проявляющиеся) блоки, которые вызываются при клике на ссылку. В модальном окне Вы можете написать любой текст, вставить форму, галерею и т.д. по Вашему вкусу. Очень полезный функционал. Я покажу, как его сделать на примере «правил использования сайта».
Так вот, для того, чтобы создать модальное окно нужно:
8.1. Создать html разметку:
<!-- В атрибуте name указываем что это модальое окно. В атрибуте href указываем, какой блок нам нужно показать. --> <a name="modal" href="#terms">terms of payment</a> <!-- А это и есть наше модальное окно, которое появится при клике по ссылке. В <span> поместим кнопку закрытия модального окна. --> <div id="terms"> <h2>Terms of Payment</h2> <h3>Program Payment</h3> <p>Lorem Ipsum.</p> <p>Lorem Ipsum.</p> <h3>Refund Policy</h3> <p>Lorem Ipsum.</p> <p>Lorem Ipsum.</p> <p>Lorem Ipsum.</p> <p>Lorem Ipsum.</p> <span class="close">OK</span> </div>
8.2. Напишем jQuery скрипт, который заставит работать модальное окно:
/* Находим все ссылки, которые содержат модальные окна */ $('a[name=modal]').click(function(){ // В конец html документа добавляем маску, она затемнит весь документ // для выделения модальноого окна $('body').append('<div id="mask"></div>'); // Заносим в переменную значение атрибута href ссылки var openBox = $(this).attr('href'); // Показываем маску и модальное окно $('#mask').fadeIn(); $(openBox).fadeIn(); // Удаляем маску и скрываем модальное окно // при клике по закрывающему элементу $('.close').click(function(){ $('#mask').remove(); $(openBox).fadeOut(); }); // Запрещаем обычное поведение ссылки return false });
8.3. Стилизируем все оптимально и правильно
#mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .7; filter: alpha(opacity=70); z-index: 1000000; } #terms { display: none; position: fixed; z-index: 1111111; top: 80px; left: 50%; margin-left: -400px; width: 800px; height: 540px; padding: 20px 40px; background-color: #fff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; zoom: 1; }
Вот и модальное окошко готово.
9. Корректное использование правила @font-face
С введением правила @font-face
в мире WEB произошла типографическая революция, в результате которой, практически любой шрифт можно использовать на страницах своего блога (сайта). Главное убедиться, что шрифт поддерживает русский (украинский) алфавит. В этом разделе я кратко и доходчиво объясню как пользоваться этим правилом.
Первое, что нужно это достать где-то шрифт в формате .ttf, который Вы хотите использовать. После того, как нагуглите и скачаете шрифт, создайте папку fonts в корне проекта и скопируйте в нее шрифт. Следующим этапом открывайте файл стилей и, после сброса дефолтных стилей, пишите правила для шрифта:
/* = Font Face */ @font-face { font-family: 'NewFont'; src: url('../fonts/some-font.eot'); src: url('../fonts/some-font.eot?#iefix') format('embedded-opentype'), url('../fonts/some-font.woff') format('woff'), url('../fonts/some-font.ttf') format('truetype'), url('../fonts/some-font.svg#NewFont') format('svg'); font-weight: normal; font-style: normal; } /* А так его применяют */ p { font: bold 24px 'NewFont'; }
Как Вы могли заметить, помимо формата шрифта .ttf
, нужны еще три формата .woff, .svg и .eot
— для Webkit браузеров, Оперы, Интернет эксплорера. А получить их можно на следующих сервисах бесплатной генерации:
После генерации, обязательно просмотрите файл с расширением .woff
, если в нем отображается шрифт неверно, то сгенерируйте его другим сервисом.
И если Вы генерировали шрифт из формата .otf
, то из него реально ничего не получится — шрифт будет сильно размазанный и явно Вас не устроит, поэтому важно иметь конкретно шрифт .ttf
.
Вот и все тайны.
10. Включаем сглаживание шрифтов в браузерах
Единтсвенное, чем меня привлекают браузеры семейства MSIE (ИЕ) это отображение шрифтов. Я в них буквально влюблен. А вот для остальных популярных браузеров нужно включать сглаживание и отключать рендеринг шрифтов в стилях, и помимо этого еще нужна правильная настройка видеокарты.
Так вот чтобы убрать зернистость (пиксельность) больших букв нужнодобавить следующие правила в Ваш файл стилей к тегу body
:
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeSpeed; }
Замечу, что если видеокарта «слабенькая» или настроена «коряво», то никакого эффекта Вы не заметите, абсурд))
11. Подключаем фавикон
Помимо логотипа фавикон это второе, жизненно необходимое каждому сайту, изображение, которое отображается в названии вкладок любого браузера, так сказать лицо сайта. И когда на его месте присутствует стандартная картинка браузера, согласитесь не сильно приятно. Чтобы избежать неловкостей, просто добудьте где-нибудь изображение, будущий фавикон (в формате .png или .jpg) воспользуйтесь сервисом http://www.favicon.cc/ и сохраните свой favicon.ico в папке с фоновыми изображениями Вашего проекта.
И в тег head
добавьте такую строку:
<link rel="Shortcut Icon" type="image/x-icon" href="http://ваш-сайт.юа/img/favicon.ico" />
12. Поворачиваем текст на 90 градусов
Тоже часто применяемая фича) на всяких картинках подписи и т.д. и т.п., не будем многословными, а просто добавим класс .vertical-text
к нужному текстовому блоку и напишем ему такие стили:
.vertical-text { -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); writing-mode: tb-rl; width: auto; text-align: center; }
Заключение:
Очень рад, что Вы дочитали до конца, надеюсь мои советы пригодятся в Ваших будущих и текущих проектах. Вопросы и предложения оставляйте в комментариях.
Используйте inline-block, если в большей степени необходим контроль над вертикальным выравниванием и горизонтальным позиционированием элементов.
Jacik, спасибо)
буква «Я» ну такая как нарисовал кто-то)
а счетчики вобще люблю попрятать подальше.. хехе
favicon.ico достаточно забросить в корень сайта, все браузеры его давно по умолчанию оттуда тянут.
noindex бывает валидным (если валидность вообще кого-то ещё интересует):
Некоторые версии браузеров, встречая «rotate(-90deg)», вырисовывают знатный пиксельарт =)
По фонтам тоже не всё так гладко: для «AgencyFB cyr» феерично смотрится буква «Я» — старайтесь не использовать её в заголовках =)
В целом, интересная подборка, приятно было почитать.
Дима, вобще рекомендуется добавлять сброс когда обтекание используется внутри блока, который тоже выравнивается обтеканием… и в ие7 когда юзаешь фильтры и
clearfix (cf)
родителя, то из-за*zoom: 1
напряги возникают и непоняткиДля сброса потока предпочитаю использовать стили из этой статьи — http://nicolasgallagher.com/micro-clearfix-hack/, этот стиль используется в HTML5 Boilerplate, не надо добавлять лишний блок в разметку.
Понравилось, узнал для себя кле что новое
Отличная и полезная статья. Только хотел бы добавить, что тэга embed по спецификации w3c не существует и код такой невалидный. Хотелось бы безскриптовое решение, если существует.
Очень занимательно и интересно!
Razon, Спасибо!
В первом совете я сечас
float
не использую, делаю с помощьюinline-block
просто родительскому контейнеру галереи задаю отрицательный отступ слева (такой как отступ между элементами галереи, тоже норм работает)Первый совет буду юзать в дальнейшем, использовал обычный список до этого. По поводу float, в некоторых случаях лучше использовать свойство overflow для родителя, работает также и не нужно создавать дополнительных пустых элементов.
10 пункт не знал, спасибо!
Вообще сайт ваш понравился, подписался, жду новых материалов! 🙂
Спасибо за статью, некоторых правил я не знала.