Пуленепробиваемый шаблон для разработки HTML5 сайтов.
HTML5 Boilerplate — это HTML/CSS/JS шаблон для всех маньяков, пишущих быстрые, неглючные и ориентированные на будущее сайты.
После более чем двух лет разработки, мы собрали лучшие хаки для кросс-браузерной совместимости, настройки производительности и даже таких вещей, как кросс-домменых Ajax запросов и Flash. А наш пример .htaccess для Apache поможет настроить правила кеширования, сжатия (gzip!) и подготовит ваш сайт к работе с HTML5 видео и @font-face.
Boilerplate — это не фреймворк. Мы также не навязываем какой-либо конкретный тип разработки. Это просто набор штуковин, помогающий быстро и безболезненно начать делать ваш сайт.
Хочется попробовать?
Скачайте Boilerp2.0
Boilerplate documented С подсказками и ссылками или Boilerplate "stripped" Без комментариев, только код.
Почему это круто
Кросс-браузерность (ага, даже IE6).
Настоящий HTML5. Можно сразу использовать новые теги.
Правила сжатия и кеширования для супер производительности.
Оптимальные параметры для настройки сайта.
Поддержка мобильных браузеров.
Использование фич в зависимости от возможностей браузера — мы это учли.
Специальные классы для Internet Explorer.
Классы .no-js и .js, чтобы можно было по-разному стилизовать страницу в зависимости от того, включен ли JavaScript.
Хочется юнит-тестов, но лениво их писать? Мы уже написали подробнейшие юнит-тесты для проекта.
Почему это ещё круче
Профайлинг JavaScript в IE6 и IE7? У матросов нет вопросов.
Заглушка для console.log, чтобы ни у кого ничего случайно не поломалось.
Вы никогда больше не будете использовать неправильную разметку или doctype.
Оптимальные стили для печати.
Код для iOS, Android и Opera Mobile, а также шаблон для CSS.
Встроенный IE6 pngfix.
Классы .clearfix и .visuallyhiden для правильной и доступной стилизации.
Конфиг .htaccess для правильного использования HTML5 и более быстрой загрузки страниц.
jQuery скачиваемый с CDN (и локальная копия, на всякий случай).
Думаете слишком много всего? HTML5 Boilerplate можно настроить на ваш вкус.
Ну а теперь всё по порядку
index.html
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Оптимизируем для экранов мобильников: j.mp/bplateviewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- CSS : implied media="all" -->
<link rel="stylesheet" href="css/style.css?v=2">
<!-- Раскомментируйте если вы поддерживаете мобильники с не очень хорошими браузерами
<link rel="stylesheet" media="handheld" href="css/handheld.css?v=2"> -->
<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
<script src="js/libs/modernizr-1.6.min.js"></script>
</head>
<body>
<div id="container">
<header>
</header>
<div id="main">
</div>
<footer>
</footer>
</div> <!--! end of #container -->
<!-- Javascript в самом низу для более быстрой загрузки страницы -->
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>
<!-- скрипты объединенные и минифицированные с помощью ant скрипта -->
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<!-- всё -->
<!--[if lt IE 7 ]>
<script src="js/libs/dd_belatedpng.js"></script>
<script> DD_belatedPNG.fix('img, .png_bg'); //fix any <img> or .png_bg background-images </script>
<![endif]-->
<!-- профайлер yui - уберите перед релизом -->
<script src="js/profiling/yahoo-profiling.min.js"></script>
<script src="js/profiling/config.js"></script>
<!-- всё -->
<!-- asynchronous google analytics: mathiasbynens.be/notes/async-analytics-snippet
change the UA-XXXXX-X to be your site's ID -->
<script>
var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.async = true;
g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s);
})(document, 'script');
</script>
</body>
</html>
style.css
/*
HTML5 ✰ Boilerplate
style.css убирает дефолтные стили, нормализует шрифты и добавляет самые базовые стили.
благодарности источникам
среди которых следующие проекты:
yui.yahooapis.com/2.8.1/build/base/base.css
camendesign.com/design/
praegnanz.de/weblog/htmlcssjs-kickstart
*/
/*
html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
v1.4 2009-07-27 | Авторы: Eric Meyer & Richard Clark
html5doctor.com/html-5-reset-stylesheet/
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display:block;
}
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
/* КОНЕЦ RESET CSS */
/* fonts.css из YUI Library: developer.yahoo.com/yui/
Проценты для размеров шрифтов: developer.yahoo.com/yui/3/cssfonts/
Меняем три вещи:
* убираем arial и helvetica из списка шрифтов
* сами нормализуем стили для моноширинных шрифтов
* font-size для таблицы был исправлен выше, так что повторять это не нужно
*/
body { font:13px/1.231 sans-serif; *font-size:small; } /* оставляем хак, для точности */
select, input, textarea, button { font:99% sans-serif; }
/* нормализуем размеры моноширинных шрифтов
* en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
*/
pre, code, kbd, samp { font-family: monospace, sans-serif; }
/*
* базовые стили (самый минимум)
*/
body, select, input, textarea {
/* #444 выглядит лучше черного цвета: twitter.com/H_FJ/statuses/11800719859 */
color: #444;
/* укажите ваш базовый шрифт здесь, чтобы он везде был одинаковым */
/* font-family: Georgia, serif; */
}
/* Headers (h1,h2,etc) have no default font-size or margin,
you'll want to define those yourself. */
h1,h2,h3,h4,h5,h6 { font-weight: bold; }
/* всегда показывайте полосу прокрутки в браузерах отличных от IE */
html { overflow-y: scroll; }
/* Делаем фокус доступным (accessible): people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }
a, a:active, a:visited { color: #607890; }
a:hover { color: #036; }
ul, ol { margin-left: 1.8em; }
ol { list-style-type: decimal; }
/* Убераем отступы от навигационных списков */
nav ul, nav li { margin: 0; }
small { font-size: 85%; }
strong, th { font-weight: bold; }
td, td img { vertical-align: top; }
sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }
pre {
padding: 15px;
/* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}
textarea { overflow: auto; } /* thnx ivannikolic! www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */
.ie6 legend, .ie7 legend { margin-left: -7px; } /* thnx ivannikolic! */
/* выравниваем чекбоксы, радио кнопки и тектовые поля по отношению к их меткам
by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
/* курсор в виде руки для всех кликабельных элементов input */
label, input[type=button], input[type=submit], button { cursor: pointer; }
/* браузеры на webkit добавляют двухпиксельный отступ к элементам формы */
button, input, select, textarea { margin: 0; }
/* цвета для правильно/неправильно заполненных полей */
input:valid, textarea:valid { }
input:invalid, textarea:invalid {
border-radius: 1px;
-moz-box-shadow: 0px 0px 5px red;
-webkit-box-shadow: 0px 0px 5px red;
box-shadow: 0px 0px 5px red;
}
.no-boxshadow input:invalid,
.no-boxshadow textarea:invalid { background-color: #f0dddd; }
/* Эти селекторы должны быть разделены
Убираем text-shadow twitter.com/miketaylr/status/12228805301
Плюс: розовенько */
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; }
/* j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: #FF5E99; }
/* исправляем кнопки для IE
www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button { width: auto; overflow: visible; }
/* бикубическое изменение размеров для IMG с не-нативными размерами
code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }
/*
* Не-семантические классы-хелперы
*/
/* для замены картинки */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
/* Прячем как от скринридеров, так и от браузеров
css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }
/* Прячем визуально, но не от скринридеров
www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */
.visuallyhidden { position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px); }
/* Прячем визуально и от скринридеров, оставляя при этом разметку */
.invisible { visibility: hidden; }
/* >> Великолепный CLEARFIX: Update to prevent margin-collapsing on child elements << j.mp/bestclearfix */
.clearfix:before, .clearfix:after {
content: "\0020"; display: block; height: 0; visibility: hidden;
}
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }
/* Главные стили:
Автор:
*/
/*
* Правила для более отзывчивого дизайна
* Эти стили следуют за главными стилями, чтобы успешно их заменить.
*/
@media all and (orientation:portrait) {
/* Стили для портретного режима */
}
@media all and (orientation:landscape) {
/* Стили для альбомного режима */
}
/* Хорошие (Grade-A) мобильные браузерв (Opera Mobile, iPhone Safari, Android Chrome)
На заметку: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {
/* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you
j.mp/textsizeadjust
html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}
/*
* стили для печати
* прямо в файле, чтобы избежать дополнительного HTTP запроса www.phpied.com/delay-loading-your-print-css/
*/
@media print {
* { background: transparent !important; color: #444 !important; text-shadow: none !important; }
a, a:visited { color: #444 !important; text-decoration: underline; }
a:after { content: " (" attr(href) ")"; }
abbr:after { content: " (" attr(title) ")"; }
.ir a:after { content: ""; } /* Don't show links for images */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
tr, img { page-break-inside: avoid; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3{ page-break-after: avoid; }
}
script.js
/* Автор:
*/
plugins.js
// используем $ вместо jQuery
(function($){
})(this.jQuery);
// как пользоваться: log('inside coolFunc',this,arguments);
// paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
window.log = function(){
log.history = log.history || []; // логи сохраняем в массив, на будущее
log.history.push(arguments);
if(this.console){
console.log( Array.prototype.slice.call(arguments) );
}
};
// перехватываем все вызовы document.write()
(function(doc){
var write = doc.write;
doc.write = function(q){
log('document.write(): ',arguments);
if (/docwriteregexwhitelist/.test(q)) write.apply(doc,arguments);
};
})(document);
crossdomain.xml
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<!-- Подробнее: www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html -->
<!-- Наиболее жесткая политика: -->
<site-control permitted-cross-domain-policies="none"/>
<!-- Менее жесткая политика: -->
<!--
<site-control permitted-cross-domain-policies="all"/>
<allow-access-from domain="*" to-ports="*" secure="false"/>
<allow-http-request-headers-from domain="*" headers="*" secure="false"/>
-->
<!--
Если вы используете crossdomain.xml с allow-access-from domain=“*”
и не полностью понимаете всё, что тут описано, результатом, скорее всего, будет опасная брешь в безопасности. ~ simon willison
-->
</cross-domain-policy>
robots.txt
# www.robotstxt.org/
# www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156449
User-agent: *
.htaccess
# Конфиг Апача
# httpd.apache.org/docs/2.2/mod/quickreference.html
# Трюки описанные ниже были собраны отовсюду в сети, включая:
# Kroc Camen: camendesign.com/.htaccess
# perishablepress.com/press/2006/01/10/stupid-htaccess-tricks/
# Не даем IE войти в режим совместимости с IE7, даже когда он сам этого хочет
# github.com/rails/rails/commit/123eb25#commitcomment-118920
# Use ChromeFrame if it's installed for a better experience for the poor IE folk
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
</IfModule>
</IfModule>
<IfModule mod_headers.c>
#
# Because X-UA-Compatible isn't sent to non-IE (to save header bytes),
# We need to inform proxies that content changes based on UA
#
Header append Vary User-Agent
# Cache control is set only if mod_headers is enabled, so that's unncessary to declare
</IfModule>
# hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/
# Раскомментируйте, чтобы разрешить кросс-доменные Ajax запросы
#<IfModule mod_headers.c>
# Header set Access-Control-Allow-Origin "*"
#</IfModule>
#
# allow access from all domains for webfonts
# alternatively you could only whitelist
# your subdomains like "sub.domain.com"
#
<FilesMatch "\.(ttf|otf|eot|woff|font.css)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
# видео
AddType video/ogg ogg ogv
AddType video/mp4 mp4
AddType video/webm webm
# Правильный формат для svg. Необходимо для работы svg шрифтов в iPad Safari
# twitter.com/FontSquirrel/status/14855840545
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
# веб-шрифты
AddType application/vnd.ms-fontobject eot
AddType font/truetype ttf
AddType font/opentype otf
AddType font/woff woff
# другие форматы
AddType image/vnd.microsoft.icon ico
AddType image/webp webp
AddType text/cache-manifest manifest
AddType text/x-component htc
AddType application/x-chrome-extension crx
#
# allow concatenation from within specific js and css files
#
# e.g. Inside of script.combined.js you could have
#
# <!--#include file="jquery-1.4.2.js" -->
# <!--#include file="jquery.idletimer.js" -->
#
# and they would be included into this single file
#
#
#
# по умолчанию, boilerplate этим не пользуется. вы можете либо
# переименовать файлы, чтобы воспользоваться этой возможностью,
# либо объединить и минифицировать эти файлы вручную.
#
# По умолчанию отключено.
# <FilesMatch "\.combined\.(js|css)$">
# Options +Includes
# SetOutputFilter INCLUDES
# </FilesMatch>
# gzip сжатие.
<IfModule mod_deflate.c>
# html, txt, css, js, json, xml, htc:
AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
# веб-шрифты и svg:
<FilesMatch "\.(ttf|otf|eot|svg)$" >
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>
#
# these are pretty far-future expires headers
# they assume you control versioning with cachebusting query params like
#
# <script src="application.js?20100608">
#
# additionally, consider that outdated proxies may miscache
#
# www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/
#
# if you don't use filenames to version, lower the css and js to something like
# "access plus 1 week" or so
#
<IfModule mod_expires.c>
Header set Cache-Control "public"
ExpiresActive on
# Может лучше явно указать, какие правила протухания кеша нам нужны?
ExpiresDefault "access plus 1 month"
# cache.manifest требует доп. запросов в FF 3.6 (спасибо Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"
# html вашего сайта
ExpiresByType text/html "access plus 0 seconds"
# дата
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
# rss поток
ExpiresByType application/rss+xml "access plus 1 hour"
# фавикон (переименовывать нельзя)
ExpiresByType image/vnd.microsoft.icon "access plus 1 week"
# медиа: картинки, видео, аудио
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
# веб-шрифты
ExpiresByType font/truetype "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType font/woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
# css и javascript
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
</IfModule>
#
# Since we're sending far-future expires, we don't need ETags for
# static content.
#
# developer.yahoo.com/performance/rules.html#etags
FileETag None
# Разрешаем IE сохранять куки из айфреймов.
# Если необходимо, раскоментируйте и укажите путь или регульярное выражние в директиве Location
# <IfModule mod_headers.c>
# <Location />
# Header set P3P "policyref=\"/w3c/p3p.xml\", CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\""
# </Location>
# </IfModule>
# www.example.com должен направлять пользователей на example.com.
# no-www.org/faq.php?q=class_b
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
</IfModule>
# без -MultiViews, Апач вернет 404 для правила mod_rewrite если не существует директории с таким же именем
# например /blog/hello : webmasterworld.com/apache/3808792.htm
Options -MultiViews
# -Indexes заставляет Апач запрещать пользователям браузить по директориям, в которых нет дефолтного документа
# Options -Indexes
# кастомная страница 404
ErrorDocument 404 /404.html
# используем utf-8 для text/plain и text/html
AddDefaultCharset utf-8
# используем utf-8 для всех этих форматов
AddCharset utf-8 .html .css .js .xml .json .rss
# We don't need to tell everyone we're apache.
ServerSignature Off
Также можете почитать замечательное описание 20 трюков, которые нужно использовать.
Можно сделать ещё лучше!
yepnope.js вместе с некоторыми костылями принесет будущее в каждый браузер.
С помощью нашего билд-скрипта и expires настроенных на год поможет сделать сайт супер быстрым.
Для помощи с CSS3 посмотрите в сторону CSS3please.com
css3pie.com и другие HTML5 костыли
Ещё лучше изучите HTML5: HTML5 Doctor Glossary и Dive Into HTML5: semantic elements
Трюки с мета-тегами.
Этот мета-тег поможет убрать дурацкий тулбар, который появляется над картинками в IE6:
<!--[if IE]><meta http-equiv="imagetoolbar" content="no" /><![endif]-->
Почитайте о CSS спрайтинге, ну или просто пользуйтесь Lemonade если вы уже сидите на Sass.
Заставьте пользователей включить JavaScript
Рекоммендации по цветовой гамме для печати
Следуйте рекоммендация Google для SEO: the Google SEO Starter Guide
Встречайте новые значения для аттрибута rel
Почитайте (достаточно субъективные) заметки о том, что делать нужно, а что нет
Чтобы iPhone не обрабатывал вашу иконку, значение rel должно быть "apple-touch-icon-precomposed"
Показывайте ссылки на страницы после самого текста при печати через IE6 и IE7
Используйте rel="prefetch" для вещей, которые нужно заранее подгрузить.
Используете border-radius с background в Webkit? -webkit-background-clip предотвратит наложение бэкграунда на границу.
Оптимальный CSS для наилучшей производительности в браузере.
Исполнение разного JavaScript в зависимости от разметки.
Доступные CSS хаки.
Get your team hooked using the same front-end coding standards and best practices.
Пользуйтесь Микроформатами (с помощью microdata) для оптимальной видимости в результатах поисковиков.
Вы можете использовать body, как обертку вместо div#container.
Больше информации о том, как сделать ваш сайт лучше.
Но ничего бы не было без помощи всех этих супергероев:
Stoyan Stefanov
Mathias Bynens
Eric Meyer
Richard Clark
Anthony Kolber
Patrick H Lauke
Tim Van Damme
Faruk Ateş
Remy Sharp
Drew Diller
Adam McIntyre
Thierry Koblentz
Mike Taylor
Jonathan Neal
Kroc Camen
Ethan Dunham
Peter Beverloo
Flickr
Viget
Steve Souders
Andy Clarke
Isobar Interface Development team