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

И снова ДЕМО, для начала.

Карусели, несмотря на всю свою ущербность, продолжают отсаватся очень востребованным компонентом на тысячах сайтов. Чаще всего для из создания используется Javascript. В этой статье я попробую описать технику создания отзывчивой (резиновой, responsive) карусели на чистом CSS.

Для начала ДЕМО.

Любой веб-сайт с годами становится все больше и больше. Не смотря на рост скорости интернета, сайт все равно грузится все дольше и дольше. Что же делать?

Сейчас повсеместно ставят всякие Retina и другие экраны с большой плотностью пикселей. Обычные картинки смотрятся архаично. Можно конечно ставить изображения увеличенные в два раза, а можно просто ипользовать векторные картинки формата SVG. Но, несмотря на 2014 год, иногда все еще можно встретить компьютеры, в которых утсановленны браузеры, неподдерживающие эту технологию. По этой причине многие ищут способы использования SVG, но чтобы IE тоже мог что-то показать вместо белого квадратика.

На самом деле все легко. Если SVG используется в качестве фонового изображения, то можно делать вот так:

.block-with-svg {
    background-image: url(/path/to/image.png);
    background-image: url(/path/to/image.svg), none;
}

А если вы просто вставили картинку, то:

<img src="/path/to/image.svg" onerror="this.src='/path/to/image.png'" />

Работает везде.

Однажды один мой товарищ попросил сделать для одного его проекта кнопку удаления, которая содержала бы внутри себя подтверждение. Т.е. как это сделано обычно? Нажимаешь удалить - выскакивает окно с вопросом "Вы уверены, что ходите удалить то-то и то-то?" - нажимаешь "Да", после чего удаляется то, что надо. Так вот, он хотел чтобы нажимаешь "Удалить", внутри кнопки меняется текст на "Вы уверены?", нажимаешь еще раз и происходит удаление.

Идея показалась мне интересной, и я решил поделиться способом простой реализации.

Ниже несколько интересных CSS-хаков и свойств, о существовании которых забывают, а то и вовсе не знают.

html {
    overflow-y: scroll;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

Вы знаете, что если для html жестко указать скролл по вертикали, то при динамическом добавлении контента у вас не будет неожиданного ресайза, когда скролл понадобиться, а мобильные браузеры не будут подстраивать размер шрифта если задать text-size-adjust.

В силу разных причин, для работы я пользуюсь Mac OS. К счастью, разнообразие редакторов кода для этой системы позволяет выбрать что-то действительно удобное именно для меня. Попробовав многие из представленных на рынке программ, я составил свой рейтинг из четырех, который вам и представлю.

Text mate

Первый из лучших, прототип для популярного Sublime Text. Вторая версия Textmate стала бесплатной и при этом не потеряла своей функциональности. Редактор не кроссплатформенный, а написан именно для использования в Mac OS, поэтому очень маленький и быстрый. Много плагинов и возможностей. Именно его я использую каждый день.

Sublime Text

Наверное самый популярный сегодня кроссплатформенный редактор. Для него написаны сотни плагинов и сниппетов. Редактор платный - $70, но при этом его бесплатная версия ни в чем не уступает платной. Есть, правда, одна особенность, периодически при сохранении выскакивает окошко с предложением купить редактор. Достаточно просто закрыть это окно и можно успешно работать дальше. Неоспоримым преимуществом этого редактора является возможность выделять сразу много разрозненных кусков кода (мультиселект) и редактировать их одновременно.

Chocolat

Молодой, но многообесчающий редактор. Написан только для Mac OS. Стоимость - $49. Бесплатно можно пользоваться 14 дней. Количество плагинов пока не велико, но сообщество растет и развивается. Так же имеет в своем арсенале возможность мультиселекта.

Brackets

Бесплатный редактор от Adobe с открытым исходным кодом. Написан под Windows, Mac OS, Linux. Интерес вызывает то, что написан он на JavaScript. Это правда обуславливает и его недостатки: медленную работу и большой размер. Есть у него и ряд преимуществ перед другими редакторами:

• Live HTML Development - сразу после сохранения изменений результат отображается в браузере (поддерживается только Chrome)
• Быстрое редактирование - css можно редактировать прямо в html-файлах, не открывая файлы со стилями.
• Adobe Edge - если вы купите подписку у Adobe, то Live HTML Development будет доступен не только в браузере компьютера, но и на различных мобильных устройствах.

Никаких выводов делать не стану, каждый сам волен выбирать, что использовать для работы. Мне кажется, что описанные мной программы все-таки лучшие для Mac OS на сегодняшний день. И да, я не учитывал здесь огромные и громоздкие комбайны вроде WebStorm. Все-таки они слишком многофункциональны для html/css/javascript разработки.

Оформление современных сайтов состоят из множества стилей, которые могут работать или не работать в тех или иных браузерах. Чтобы всё работало везде, для некоторых свойств необходимо использовать префиксы разных браузеров. По английски они называются vendor prefixes.

Ниже список самых необходимых и популярных свойств, использующих префиксы (или где их ставят по ошибке):

Без префиксов

border-radius : Если не нужна поддержка Firefox 3.6 или iOS 3.2

box-shadow : Если не нужна поддержка Firefox 3.6 или iOS 4.3 или Safari 5.0

text-shadow

border-image

Используют только один префикс

CSS Transitions : -webkit- для Safari 6.0

CSS 3D Transforms : -webkit- для Safari и Chrome

CSS Animation : -webkit- для Safari и Chrome

CSS Gradients : -webkit- для Safari

Box Sizing : -moz-.

CSS Calc : -webkit- для Safari 6.0

Несколько префиксов

CSS Transforms : -webkit- для Safari и Chrome и -ms- для IE9

Flex Box : -webkit- и -ms-.

Columns : -webkit- и -moz-.

Почему я не упомянул про префикс -o-, который использовался в опере до 12 версии включительно? Потому, что о ней стоит упоминать только в контексте сайтов, которые будут сделаны для просторов СНГ. Если это ваш случай, то помните - Opera <=12 занимает около 9 процентов СНГ-шного рынка браузеров. В таком случае префикс -o- необходимо добавлять для свойтсв, для которых могут ставиться префиксы -webkit- или -moz-.

Полный список свойств, использующих префиксы

Существует несколько популярных вариантов отображения иконок на веб-странице:

• картинки
• svg
• иконочные шрифты

В своей работе я, например, чаще всего использую картинки (png, в частности), но в последнее время стал уделять большое внимание иконочным шрифтам.

Их так же существует привеликое множество: FontAwesome, Entypo и другие.

Но в процессе тестирования на разных устройством были обнаружены некторое особенности отображения иконок. Самым интересным стало то, что браузер IE на Windows Phone 7.5 вдруг вместо иконок шрифта Entypo отрисовал свои иконки, которые вышлядели практически идентично.

Задавшись этим вопросом, мы с товарищем @pukhalski стали «читать» интернет.

В этом месте, следует уточнить, что для отрисовки иконок мы использовали следующую контрукцию:

.icon {
    display: inline-block;
    font-family: 'entypo';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon:before {
    content: "\2606";
}

В данном примере 2606 - Unicode для отображения здездочки. Т.е. вы должны увидеть примерно вот это: ☆.

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

Стоит также вспомнить о шрифтах Webdings, Wingdings, Wingdings 2, Windings 3, которые точно присутствуют в Windows и Mac OS и несут внутри себя сотник классных иконок.

Экономьте свои силы и траффик пользователей, используйте встроенные шрифты. Кстати, это очень кроссбраузерно и кросссистемно.

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

Чтобы правильно использовать эти функции необходимо знать, какой браузер в данный момент использует пользователь. Единственный правильный способ определить браузер в JavaScript - Useragent. Вот небольшой скрипт, который возвращает объект с различными свойствами, в том числе - мобильный или нет браузер, а также версию Android (может оказаться полезным):

var uAgent = navigator.userAgent || '';
var browser = {
version : (uAgent.match( /.+(?:me|ox|on|rv|it|era|ie)\/: / ) || [0,'0'])[1],
opera : /opera/i.test(uAgent),
msie : (/msie/i.test(uAgent) && !/opera/i.test(uAgent)),
msie6 : (/msie 6/i.test(uAgent) && !/opera/i.test(uAgent)),
msie7 : (/msie 7/i.test(uAgent) && !/opera/i.test(uAgent)),
msie8 : (/msie 8/i.test(uAgent) && !/opera/i.test(uAgent)),
msie9 : (/msie 9/i.test(uAgent) && !/opera/i.test(uAgent)),
msie10 : (/msie 10/i.test(uAgent) && !/opera/i.test(uAgent)),
mozilla : /firefox/i.test(uAgent),
chrome : /chrome/i.test(uAgent),
safari : (!(/chrome/i.test(uAgent)) && /webkit|safari|khtml/i.test(uAgent)),
iphone : /iphone/i.test(uAgent),
ipod : /ipod/i.test(uAgent),
iphone4 : /iphone.OS 4/i.test(uAgent),
ipod4 : /ipod.OS 4/i.test(uAgent),
ipad : /ipad/i.test(uAgent),
ios : /ipad|ipod|iphone/i.test(uAgent),
android : /android/i.test(uAgent),
bada : /bada/i.test(uAgent),
mobile : /iphone|ipod|ipad|opera mini|opera mobi|iemobile/i.test(uAgent),
msie_mobile : /iemobile/i.test(uAgent),
safari_mobile : /iphone|ipod|ipad/i.test(uAgent),
opera_mobile : /opera mini|opera mobi/i.test(uAgent),
opera_mini : /opera mini/i.test(uAgent),
mac : /mac/i.test(uAgent),
webkit : /webkit/i.test(uAgent),
android_version: parseFloat(uAgent.slice(uAgent.indexOf("Android")+8)) || 0
};