HTML5 и CSS3. Подними свой сайт на новый уровень

20 апреля 2011 года, Размещено в категории: HTML / CSS

Добрый день, сегодня у нас очередной гостевой пост, от блоггера, который написал замечательную статью - Структурные теги в HTML5.

Сейчас много говорят об этих двух языках для веб-разработки. Хотя ни один из них не поддерживается в полной мере даже самыми совершенными браузерами - никто не мешает сделать ваш сайт на более высоком уровне. Сегодня я попробую вкратце рассмотреть, почему же стоит использовать новые технологии и как они могут помочь веб-разработчику.

Примеры

HTML5

HTML5 является последней версией HTML или языка гипертекстовой разметки. В настоящее время только несколько браузеров поддерживают HTML5 и то не в полной мере. Полный переход на этот стандарт запланирован на 2014 год, но некоторые функции, которые доступны уже сегодня, дают возможность познакомиться с HTML5 и добавить на свой сайт некоторые классные штуки 😉

Компания Apple отказывается внедрять технологию Flash в операционную систему iOS, из-за многочисленных ошибок и сбоев самого флеша. Соответственно, разработчикам приложений и сайтов для iOS обязательно нужно внедрять HTML5 для создания более сложных и красивых сайтов, раз уж у них нет Flash.

Google представил YouTube в формате HTML5 и многие разработчики, видя такую поддержку мировыми лидерами индустрии интернета, тоже добавляют в свои проекты какие-то новые возможности. Будущее не за горами, но думать о нем нужно уже сегодня.

Основная идея HTML5 в том, что страница это не один большой объект, а несколько маленьких, которые работают вместе на общий результат. Новый стандарт опирается на широкое распространение HTML4. Это значит, что разработчик не выкидывает старую разметку, а просто обновляет ее под новые возможности, с учетом новых технологий. Например, формы могут быть обновлены для обеспечения новых функций, таких как удобный вход для тех, кто пользуется мобильным устройством на базе разных операционных систем. А те, кто все еще заходит на сайт, используя IE6, увидят привычное текстовое поле, которое все так же работает.

Вот несколько примеров сайтов, работающих на HTML5:

Примеры

Примеры

Бильярд

Примеры

Особенности HTML5

  • Любой синтаксис HTML5 требует указывать DOCTYPE таким образом, чтобы браузер мог отобразить страницу в стандартном режиме. Но есть и хорошие новости, код упростили и теперь можно указывать только: <!DOCTYPE html>
  • Отличная поддержка аудио и видео на страницах. Как только все браузеры будут в полной мере поддерживать этот функционал - станет намного проще добавлять и просматривать этот контент на веб-страницах.
  • Код можно писать таким образом, что картинок, которые составляют большую часть трафика при загрузке сайта, можно будет использовать намного меньше. Скорость загрузки и отрисовки возрастет на порядок., что не может не радовать.
  • Разработчики мобильных приложений могут не оптимизировать код для каждой модели, а использовать универсальный для всех HTML5
  • ….
  • PROFIT!

CSS 3

Cascading Style Sheets (CSS) предлагают большую гибкость в представлении материалов сайта. Хотя CSS3 не поддерживается всеми браузерами, тем не менее, этот стандарт становится все более популярным, поскольку он вносит такие изменения, которыми можно заменить многие фишки JavaScript.
Одним из недостатков использования CSS3 является необходимость внедрения в код дополнительных фильтров, которые работают для IE. Но, иногда, самые свежие FF и Chrome капризничают и отображают стили кривовато.

CSS3 предлагает множество возможностей для наведения красоты на странице. Не всегда они необходимы, но пользователю приятно заходить на сайт, который работает и грузится быстро и выглядит современно. Именно поэтому сейчас такой ажиотаж вокруг CSS3 и его новых возможностей. Некоторые функции, такие как меню, необходимы практически на любом сайте. Но с CSS3, функциональность и эстетика восприятия страницы увеличиваются в геометрической прогрессии.
Особенности CSS3:

  • Тени блоков
  • Тени для текста
  • Собственные шрифты для страницы
  • Несколько бэкграундов для блока
  • Прозрачность элементов
  • Цвет в формате RGBA
  • Трансформирование элементов
  • Закругленные углы блоков
  • Простое изменение размеров изображений

И это далеко не полный перечень возможностей CSS3. Вам все еще хочется оставаться в 20 веке??






6 комментариев

  • 6 лет назад Ответить

    Это все круто, но неотображаемость некоторых моментов в IE сводит на нет весь праздник)

    • 6 лет назад Ответить

      У IE уменьшили цикл разработки. Поэтому можно надеяться на скорое внедрение праздника

  • 6 лет назад Ответить

    Жаль только, что мало что из этого поддерживается браузерами…=(

    • 6 лет назад Ответить

      Скоро будет поддерживаться, надо просто подождать.

  • 6 лет назад Ответить

    Твое мнение:Да css хорошая вещь с помощью нее много чего можно сотворит!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перед отправкой формы: