2010 год ознаменовался выходом стандарта HTML5, благодаря которому разработчики получили высокостандартизованную, абсолютно новую веб-среду. Основные мировые браузеры, в том числе Mozilla Firefox, Google Chrome, Safari и Opera очень быстро адаптировались к нововведениям и восприняли их сугубо положительно. При этом автономность упомянутых браузеров еще больше увеличилась, в чем запросто можно убедиться, наглядно изучив особенности поддержки HTML5 на www.html5readiness.com.
Кроме того, разработчики наконец-то получили возможность успешно справляться со сложностями, создаваемыми браузером Internet Explorer. За это нужно поблагодарить Google Chrome Frame, разработанный в 2010 году и позволяющий IE поддерживать HTML5. За прошедшее с тех пор время Google Chrome Frame завоевал очень большую популярность. Его можно добавить в любую из версий браузера Internet Explorer, воспользовавшись нижеприведенным-тэгом в тэгенашего сайта:
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
Мы можем предложить пользователям IE, загрузить приложение при помощи JavaScript.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<script>
window.onload = function(){
CFInstall.check({
mode: "overlay",
destination: "http://www.yourdomain.com"
});
};
</script>
Наверняка многие из вас помнят, как непросто было «заставить» каждый браузер корректно отображать тот или иной сайт. Зачастую для этого приходилось писать невероятно подробные JavaScript-коды, делать огромное количество пустых элементов с ужатыми, отвратительного качества картинками. И все для того, чтобы самый примитивный функционал просто мог работать! К сожалению, сегодня эти проблемы все еще полностью не решены. Мы, как и раньше, сражаемся за абсолютный контроль, находимся в постоянном поиске наиболее удобных инструментов для «укрощения» функционала, стиля и размещения. Но сегодня эти процессы происходят на качественно ином уровне.
Расположение
Clearfix
Первоначально свойство float появилось еще в CSS 2.1. Однако ему так и не суждено было стать рецептом от всех бед, как на то многие рассчитывали. Одна из наиболее остро стоящих проблем – сложность поддерживать размеры родительского элемента, если дочерний – плавающий. Для ее решения и был создан хак, в дальнейшем получивший известность как clearfix. В качестве примера возьмем такой HTML:
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
<div class="cf"> <div class="left">...</div> <div class="right">...</div> </div>
Автор хака– Николас Галлахер:
Box-sizing
Спор о том, какая боксовая модель лучше, ведется на протяжении многих лет. Однако извечное соперничество режимов Standards и Quirks в итоге сводится всего к одному простому вопросу: должны размеры элемента после их установки и при применении заполнения и границ оставаться неизменными или нет? В настоящее время многие разработчики считают, что заполнение границы не нужно добавлять к высоте и ширине элемента, а следует считать частью пространства, доступного внутри него.
Но с ростом популярности хака, меняющего размер боксов, эта дискуссия потеряла всякий смысл. Отныне именно вы будете диктовать условия браузеру, а не он вам. Создатели этой по-настоящему универсальной техники – Пол Айриш и Крис Койер. А на практике она применяется вот таким образом
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Применение селектора* в CSS многие оценивают отрицательно, так как это якобы может сильно сказаться на производительности. В действительности снижение несущественное и им запросто можно пренебречь. Конечно,если речь не идет о масштабной гипероптимизации приложения или целого сайта. Функция border-box позволит браузеру добавить внутрь доступного пространства границы и заполнение. Применять режим ‘Standards Mode’ можно после установки размера боксов, равному размеру содержания.
Multi-columns
Традиции печати и писем оказали большое влияние на основные принципы отображения в Интернете текстовой информации. Однако по уровню развития этого аспекта он все еще находится на стадии примитивного пергамента. Решить отдельные проблемы можно при помощи внедрения стандартов CSS Regions и Paged-Media. При этом следует отметить, что первый опыт по размещению «как в журнале» был у разработчиков уже в то время, когда браузеры еще только начинали активно работать с мультиколонками CSS. Чтобы создать подобный эффект, нужно воспользоваться достаточно простым кодом:
p {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
Расчеты размеров
Расчет размеров элементов – очень сложное дело. В прежние времена никаких инструментов, которые можно было бы применять для подсчета единиц, задействованных в верстке, попросту не существовало. Уже не говоря об инструментах для подсчета смешанных единиц – это было просто фантастикой. Однако с появлением calc ситуация принципиально изменилась. Благодаря ей создается специальное заполнение, не использующее ничего вроде box-sizing: border-box и не оказывающее никакого влияния на оригинальную ширину элементов. Еще совсем недавно такое было возможно разве что при добавлении дополнительных элементов.
.padded {
margin: 0 auto;
position: relative;
width: -webkit-calc(100% - (20px * 2));
width: -moz-calc(100% - (20px * 2));
width: calc(100% - (20px *2));
}
calc() обеспечивает правильный расчет ширины, основываясь на ширине материнского элемента, от которого отнимается некое заполнение в 20px. Для каждой стороны элемента 2 я выполнил умножение на два; центровку элемента произвел при помощи относительного поцизионирования. А затем просто установил автоматические рамки – правую и левую.
Стили
Прозрачность
Если перед вами стояла задача оформить элемент в том или ином стиле, вы в первую очередь прибегали к инструментам, доступным в CSS на тот момент. Одним из самых первых поддерживаемых свойств была прозрачность – она появилась еще примерно в начале 2000-х годов. С момента выхода HTML5 непрозрачность реализована в браузерах по умолчанию. Более того, в них появилась поддержка альфа-канала, наподобие того, что реализовано в стандарте ColorModule. Он включает, в том числе, руководства по HSLA и RGBA.
a {
color: rgba(0,255,0,0.5);
background: rgba(0,0,255,0.05);
border: rgba(255,0,0,0.5);
}
Если имеются значения HEX, цветовые модели HSLA и RGBA можно применять постоянно. Также разработчикам доступно множество необычных оттенков –просмотреть их можно сразу в данном стандарте. Эти необычные оттенки вполне можно использовать для динамичного смешения элементов.
Фильтры
Экспериментировать в CSS с различными фильтрами – одно удовольствие. Вы можете менять ощущение и вид элементов на странице в динамическом режиме, и при этом вам не нужны сторонние дополнения. Это действительно очень интересно. Кроме того, вы экономите время, проводимое с Photoshop.
<img src="market.jpg">
img {
-webkit-filter: grayscale(100%);
}
На сегодняшний день фильтры CSS поддерживают лишь браузеры на движке webkit. По этой причине рекомендуется применять их только в качестве дополнения, но никак не основного инструмента. Более подробную информацию о фильтрах можно получить по этой ссылке.
Благодаря фильтрам CSS вы можете дорабатывать картинки прямо на страницах в браузере. Большое количество примеров доступных фильтров – здесь
Замена изображений
Эта техника используется уже на протяжении очень долгого времени. Однако определенные недостатки имеются даже в самых новых и тщательно протестированных техниках замены. Хотя сегодня очень большой популярностью пользуются два, без преувеличения, потрясающих метода, уникальных и неповторимых. Создатель первого – Скотт Келлман:
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
Второй метод предложил Николас Галлахер
.hide-text {
font: 0/0 a;
text-shadow: none;
color: transparent;
}
Адаптивное видео
В адаптивной верстке добиться отображения аудиовизуальных элементов в правильном масштабе совсем непросто. А так как многие современные сайты обладают самонастраивающейся конструкцией, разработчику нужно обеспечить корректную обработку разрешения элементов и их размеров. Одним из наиболее «непослушных» аудиовизуальных средств является встроенное видео. Объясняется это тем, что за поставку контента отвечают дополнительные сервера. Таким образом, встраивание видеоролика с YouTube будет выглядеть примерно следующим образом:
<div class="video"> <iframe width="640" height="390" src="http://www.youtube.com/embed/oHg5SJYRHA0" frameborder="0" allowfullscreen=""></iframe> </div>
.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Данный метод основывается на установке wrapper’spadding-bottom видео: 56,25%; Применение заполнения говорит о том, что процентные значения будут основаны на ширине родительского элемента; ‘56,25%’ дает разрешение 16:9. При желании вы можете посчитать все и самостоятельно. 9 / 16 = 0,5625. 0,5625 * 100 = 56,25 (значение в процентах).
Функциональные возможности
Простой выбор элементов
По мере увеличения популярности jQuery и других библиотек JavaScript, стандартная комиссия W3C и комитет ECMAScript заметили, что разработчикам очень сильно не хватало выбора элементов. А ведь это – основополагающий аспект функциональности. Безусловно, getElementsByClassName() и getElementByID() как методы довольно быстры, однако им не хватает надежности и гибкости selector engines из сообщества разработчиков. Эта гибкость была сымитирована комиссией по стандартизации в виде querySelectorAll(), представляющем собой оригинальный метод-селектор.
var items = document.querySelectorAll('#header .item');
querySelectorAll() рассчитана на одновременную работу с множественными и разными селекторами. Более подробную информацию об этом вы найдете здесь
Создание новых массивов данных
Всем известно, что писать переборы элементов массива просто ужасно скучно и утомительно. Особенно это касается циклов for(). JS версии 1.6 включает в себя специальный метод map(), который поддерживает гораздо более удобный перебор массива и позволяет создавать новый массив на его основе.
var people = ['Kevin', 'Kari', 'James','Heather'];
var welcomes = people.map(function(name){
return 'Hi ' + name + '!';
});
Если прогнать вышеописанный код с функцией console.log(welcomes), то в новом массиве можно увидеть приветствия [‘HiKevin!’, ‘HiKari!’, ‘HiJames!’, ‘HiHeather!’ ].
«Чистка» документов
Нередко некоторые библиотеки JavaScript просто-напросто вмешиваются как в объекты в окне браузера, так и в исходные документы. Это, что и говорить, очень неудобно и для разработчика, и для многих отдельных библиотек. Так что лучше позаботиться о том, чтобы у вас получились «чистые» версии объектов и создать каждому новую копию. Реализовать это на практике проще всего при помощи создания элемента iframe и его вставки в модель DOM. В таком виде новые копии объектов и будут храниться.
var iframe = document.createElement('iframe');
iframe.style.display = "none";
iframe = document.body.appendChild(iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild(iframe);
За последние годы серверное программное обеспечение претерпело немало значительных улучшений. Однако очень важно не останавливаться на достигнутом и продолжать планомерно совершенствовать технологии. Это позволит нам более эффективно решать самые разнообразные задачи, связанные с функционалом, стилем и расположением проектов. Чтобы стимулировать дальнейший рост и развитие экосистемы, следует всеми силами поддерживать компании-производители браузеров и комитеты по стандартизации. Также очень важно внедрять новые свойства и разрабатывать новые стандарты, постоянно обмениваться опытом с другими веб-дизайнерами и разработчиками. Одним словом, больше конкретики и поменьше плясок с бубном.