Рекомендации по использованию HTML5 тегов

Дата публикации:3 мая 2013 г. 18:19:10

Здравствуйте! Поскольку HTML5 теги поддерживаются не всеми браузерами, а люди не хотят обновляться (и их нужно карать за это), перед разработчиками стоит дилемма. Стоит ли использовать новые возможности и все делать по-старинке? Мое мнение - стоит.

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

Итак, рекомендации. Можно сделать уведомления для старых браузеров с помощью JS, что их браузер устарел и необходимо обновиться. Сделать это можно так:

    $(document).ready(function() {
        $('.msg').slideDown('slow', function() {
            $('.msg').css('display', 'block');
        });
        $('.hide-el').click(function() {
            $('.msg').slideUp('slow', function() {
                $('.hide-el').css('display', 'none');
                $('.msg').css('display', 'none');
            });
        });
    });

Здесь мы после загрузки страницы показываем элемент с классом msg. Элемент с классом hide-el - это значок крестика (чтобы пользователь мог закрыть это уведомление). Событие slideDown прекрасно обращает на себя внимание, так как блок вальяжно выезжает. Это что-то вроде аналога уведомления ВКонтакте о том, что они переехали на новый домен.

Идем дальше, css код:

.msg {
    display: none;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background: #cd2b3a;
    background: rgba(205,43,58,0.3);
    color: #fff;
    font-size: 90%;
    text-align: center;
    line-height: 30px;
}
.msg a { color: #fff; }
.msg a.hide-el {
    position: absolute;
    right: 10px;
    top: 5px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    background: transparent url('../img/close.png') no-repeat center center;
    width: 16px;
    height: 16px;
}

Не забудьте найти картинку крестика (закрытия блока) и обновить путь. И теперь HTML код:

<div class = "msg">
    Ваш браузер безнадежно устарел. Рекомендуем вам обновить его как можно скорее, так как большинство современных сайтов, включая наш будут 
отображаться не совсем корректно. Спасибо! <a href = "#" class = "hide-el"></a> </div>

Как опредилть версию браузера? Очень просто. Вообще, все браузеры обновляются сами, кроме IE, а наша главная головная боль - это именно он. Поэтому можно создать в блоке head условия, типа таких:

<!--[if IE 8]>
И здесь уже вызвать наш скрипт
<script type = "text/javascript" src = "путь до файла скрипта></script>
<![endif]-->

И да, приведенный код работает с использование jQuery, следовательно нужно еще ее подключить. Если у вас очень простой сайт и там нет и не может быть jQuery, то перепишите код на чистом JS.

 

Далее. Теперь поговори про input. В HTML5 появилось много новых типов инпутов. Я не буду описывать их все, сами найдете, опишу на примере одного (самого распространенного). Это Email.

<input type = "email" name = "email" placeholder = "Пример: admin@example.com" />

Теперь этот код будет проверяться на корректность без использования JS и т.п. Однако, не забывайте, что у пользователя может быть старый браузер и этот тип будет интерпретирован его браузером как type = "text", следовально проверяется корректность на сервере.

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

 

На этом пока все. Спасибо за внимание!

Метки:html5, css, js, jquery, советы