Тег: вёрстка

Как с помощью jQuery красиво создавать элементы

Нынче модно делать это так:

$('<div />', {
	id: 'martini'
});

Раньше, как правило, делалось так:

$('<div id="martini"></div>');

Если создавать просто один div с id, то это вполне наглядно. А вот если требуется «биндить» события, то новый способ гораздо нагляднее (особенно если вспомнить про сравнение версий в SVN или GIT):

$('<div />', {
	id: 'martini',
	click: function(e) {
		e.preventDefault();
		$(this).animate({opacity: .1});
	}
});

:3

Можно и так:

var anchor = $('<a />', {
	className: 'more-whisky',
	href: '#whisky',
	text: 'More whisky',
	click: function(e) {
		e.preventDefault();
		$(this).parent().slideToggle();
	}
});
 
$('li').each(function() {
	$(this).prepend(anchor.clone());
});

Красота! Зачем клонировать элемент? Потому, что переменная ссылается на одиночный элемент. Если вы его не склонируете, то в итоге получите только один вставленный элемент на странице.

И… Данная возможность в jQuery уже год. :)

Подробнее и ещё несколько примеров в документации.

5

Советы, хитрости и приёмы вёрстки CSS и HTML

Иконка CSS Edit 2

Это иконка CSS Edit 2, хотя в статье не будет ни слова о CSS Edit 2 :)

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

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

Для начала, пара провокационных советов:

1. Пришло время прекратить поддержку Internet Explorer 6

Возможно, меня закидают камнями, но, сколько можно? Этому браузеру 9… Да, девять лет! Сейчас им пользуется около пяти процентов пользователей рунета, Microsoft делает всё возможное для уменьшения этой цифры. К сожалению, предлагая скачать не намного более современную 8-ю версию своего браузера.
Нет, я не ратую за отказ в доступе к сайтам с устаревших браузеров. Лучшим решением представляется уведомление пользователя, например: «ваш браузер устарел и не поддерживается — функциональность данного сайта может быть ограничена» и ниже привести список рекомендуемых современных браузеров. Так уже сделали на YouTube, Google Docs (к концу 2010 года планируют прекратить поддержку в Google Mail и Calendar) и на многих других популярных сайтах и порталах. Я думаю, это очень хороший повод для того чтобы начать делать так же. А время, которое было бы потрачено на поддержку IE6, лучше потратить на разработку новой полезной функциональности.

2. CSS3

Большинство расценивает CSS3 только как возможность сделать закруглённые уголки и добавить тень. Но, на самом деле, возможностей гораздо больше: загружаемые шрифты, outline, транформации, flexible box layout, многоколоночная вёрстка, текстуры для контуров, медиа-апросы и многие-многие другие чрезвычайно полезные штуки.

Хотя CSS3 ещё в разработке, большинство современных браузеров уже поддерживают основные возможности, зачастую с префиксами (например: -moz-border-radius и -webkit-border-radius для Firefox и Safari/Chrome соотвественно).
Не стоит забывать, что по статистике большая часть пользователей до сих пор пользуется браузерами, не поддерживающими CSS3 (все версии Internet Explorer). Но начинать применять CSS3 стоит уже сейчас.
Ещё 39 приёмов и советов по CSS

14

CSS-хаки для Internet Explorer, Firefox и Opera

IE6. Как много в этой аббревиатуре для сердца верстальщика слилось… :lol: Ежеминутно со всех сторон света на всех языках мира доносятся тысячи проклятий в адрес разработчиков этого замечательного браузера. Но сегодня постараемся обойтись без этого. Хотя, иногда задумываешься, а ведь не было бы IE — как же было бы скучно, да и верстальщикам платили бы меньше. :-D

IE7 тоже тот ещё продукт, но хоть PNG с прозрачностью отображает нормально. А вот IE8 уже гораздо больше любит стандарты, но всё равно жуткий тормоз… Ну вот и как после этого хорошо относиться к продуктам Microsoft? Так, я же не хотел! :!:

В этом посте я собрал все CSS-хаки, что смог найти в сети. Сам стараюсь их не использовать, за исключением редких случаев. Один случай как раз был недавно — замечательная Noname CMS заказчика автоматом вырезала все комментарии из HTML-шаблонов (в том числе и условные, в которых были стили для IE6). Ну чтож, пришлось переделать на хаки…

Начнём с нашего «любимого» браузера:

Internet Explorer 6

.class { _color: #666; }

Internet Explorer 6 и 7

* html .class { color: #666; }
.class { *color: #666; }

Internet Explorer 7

*:first-child+html .class { color: #666; }
*+html .class { color: #666; }
html>body .class { *color: #666; }

Internet Explorer 8

.class { color /***/: #6669; }

Существуют хаки и для нормальных браузеров, мне ни разу не приходилось ими пользоваться, но их тоже полезно знать:

Firefox

@-moz-document url-prefix() {
	.class { color: #666; }
}

Opera

@media all and (min-width: 0) {
	.class { color: #666; }
}
.class, x:-moz-any-link { color: #666; }
*|html[xmlns*=""] .class { color: #666; }
html:first-child .class { color: #666; }

.class можно заменить вашим названием или вообще любым элементом, соответственно, вместо color: #666; может быть любое свойство.

Внимание! Использование большинства из этих хаков приведёт к ошибке валидации CSS-документа, что не очень страшно, но всё равно настоятельно рекомендую использовать вместо хаков условные комментарии и отдельные CSS-файлы для разных браузеров:

Условные комментарии (Conditional Comments)

<link rel="stylesheet" href="style.css" />
<!--[if lte IE 7]><link rel="stylesheet" href="lteie7.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" href="ie8.css" /><![endif]-->

1 подключится во всех браузерах.
2 подключится в Internet Explorer, версия которого меньше или равна 7.
3 подключится только в Internet Explorer 8.

4

Семантическая разметка в HTML

В последнее время стало очень модным такое понятие как семантика.

Википедия даёт следующее определение: «Семантика — система правил определения поведения отдельных языковых конструкций. Семантика определяет смысловое значение предложений алгоритмического языка.» Это применительно к языку.

Ну а применительно к HTML, простыми словами — теги, названия ID и классов элементов должны соответствовать их содержимому по смыслу.

Приведу простейший пример — у нас есть следующее определение:

Капитан Очевидность (англ. Captain Obvious)
— уникальный супергерой, который всегда готов прийти на помощь Анонимусу, чтобы высказать прописную истину.

Как напишет код верстальщик не знакомый с понятием «семантика»:

<p><strong>Капитан Очевидность (англ. Captain Obvious)</strong><br /> — уникальный супергерой, который всегда готов прийти на помощь Анонимусу, чтобы высказать прописную истину.</p>

А вот как напишет этот код верстальщик, с ним знакомый:

<dl><dt>Капитан Очевидность (англ. Captain Obvious)</dt><dd> — уникальный супергерой, который всегда готов прийти на помощь Анонимусу, чтобы высказать прописную истину.</dd></dl>

Здесь использованы подходящие по смыслу элементы HTML: <dl> — это Definition List (список определений), <dt> — Definition Term (имя определяемого термина), <dd> — Definition Description (определение термина). А выделение жирным имени термина задано с помощью CSS.

Ну и ещё как пример — классическое меню, сделанное с помощью неупорядоченного списка:

<ul id="nav">
	<li><a href="/about/" title="О компании">О компании</a></li>
	<li><a href="/services/" title="Услуги">Услуги</a></li>
	<li><a href="/contacts/" title="Контактная информация">Контактная информация</a></li>
</ul>

Такую разметку будет потом очень просто оформить с помощью CSS.

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

Что использовать, ID или class?

В интернетах с завидной регулярностью задают этот вопрос, постараюсь ответить.

ID — это имя уникального элемента на странице, я использую его для структурной разметки (#header, #content, #aside, #footer), для элементов формы и для элементов, к которым в дальнейшем планирую обращаться через jQuery. В последнем случае, конечно, можно использовать и классы… Но грамотней использовать ID, так как селектор $("#id") работает гораздо быстрее, чем $(".class"), по причине того, что используется DOM-функция getElementById(). А если элемент не уникален на странице (их несколько), то желательно положить его в блок с ID и обращаться к нему так: $("#id .class"). Такой селектор будет работать быстрее чем $(".class"), так как поиск элемента будет производиться только в блоке #id, а не во всём документе. Отвлёкся немного в сторону jQuery, но это тоже полезно знать. :!:

Регулярно в чужом коде встречаю названия классов привязанные к отображению, например: class="column-red-150-border-black". Это семантически некорректно, и в таком коде разбираться гораздо тяжелее. Не рекомендую такой код. :)

Ещё пример — в моём блоге, в разделе Эбаут используется микроформат hCard (микроформаты вообще интересная штука):

<div class="vcard">
	<span class="n"><span class="fn"><span class="family-name">Коромыслов</span> <span class="given-name">Алексей</span></span> <span class="additional-name">Георгиевич</span></span>
	<p>Родился <abbr class="bday" title="1987-04-14">14 апреля 1987 года</abbr>. Работаю <abbr title="разработчик ПО" class="role">разработчиком ПО</abbr> в компании «<a href="http://profit-labs.ru/" class="org">ProfIT Labs Ltd</a>».</p>
	<p>В сети «известен» под ником «<span class="nickname">lazymozzy</span>».</p>
	<h3>Контактные данные</h3>
	E-mail: <a class="email" href="mailto:alexey@koromyslov.ru">alexey@koromyslov.ru</a>
	Skype: <a class="skype" href="skype:lazymozzy">lazymozzy</a>
</div>

Используемые здесь полное имя (fn), организация (org), адрес электронной почты (email) и пр. определены с использованием определённых имён классов, а для всего блока задан class="vcard", который показывает, что вложенные классы принадлежат hCard. Например Яндекс уже начал поддерживать микроформаты.

Стоит знать, что валидный код и семантика не помогут побороть баги IE. Прежде всего стандарты и семантика способствуют меньшему количеству ошибок и лучшей читаемости кода — в итоге меньше времени будет затрачиваться на поиск элементов и исправление ошибок. Также семантически структурированную разметку любят поисковики, что в свою очередь ведёт к более высоким строчкам в поисковой выдаче.

Структура HTML

Так, блог ведь о дизайне, вёрстке и фотографии. О фотографии есть, о дизайне совсем мало, о вёрстке вообще ничего. :) Исправляемся!

Структура HTML

За всё время моей «карьеры верстальщика» у меня накопилось огромное количество велосипедов сниппетов, хаков и всяческих идей. Решил посвятить им несколько «статей». Вообще, в интернетах по данной тематике можно найти очень много информации. Но большинство того, что выдают поисковики устарело.
Начну с основ — с чего обычно начинается процесс вёрстки