Блог



Почти стандартный режим

Влад Мержевич

Этот режим основан на стандартном режиме с некоторыми исключениями: отображение изображений внутри ячеек таблицы и рисунков друг под другом происходит как в режиме совместимости. Для переключения в почти стандартный режим применяется один из следующих доктайпов.

Для HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Для фреймов в HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Для XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

Для фреймов в XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN">

Стандартный режим

Влад Мержевич

Продолжая тему режимов браузера, рассмотрим стандартный режим — режим поддержки стандартов (X)HTML и CSS. Для переключения браузера в этот режим используется один из следующих доктайпов.

Для HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html>

Для XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Режим совместимости

Влад Мержевич

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

Также переход происходит, если доктайп вообще не указан или не может быть распознан.

Режимы браузеров

Влад Мержевич

Во время противостояния браузеров Internet Explorer и Netscape каждый из разработчиков старался улучшить своё детище, чтобы усилить позиции программы на рынке и привлечь больше пользователей.  Netscape 4 и IE4 ужасно поддерживали веб-стандарты, поэтому следующая версия, IE5 должна была не только исправить ошибки IE4, но и показать улучшенную поддержку спецификации CSS. Это было необходимо еще и по политическим мотивам, поскольку компания Майкрософт вошла в группу W3C и начала оказывать сильное влияние на разработку HTML и CSS.

В процессе работы над браузером IE5 его разработчики столкнулись с неожиданной трудностью. Разница при отображении страницы в разных версиях браузера была настолько велика, что множество сайтов оказались бы неработоспособными при просмотре в IE5. Идея сделать кнопку для переключения в режим совместимости пришла только в версии 8.0, поэтому разработчики IE5 пошли другим путём. Все старые страницы отображались по старым правилам, а для включения режима поддержки стандартов в код страницы необходимо добавить элемент <!DOCTYPE> (доктайп).

Режимы Internet Explorer

Влад Мержевич

Вокруг Internet Explorer сложилась ситуация, которая больше не прослеживается ни с одним другим браузером — разброс версий начинается с 6.0 и заканчивается 9.0. Причины использования устаревших версий могут быть совершенно разные.

  • Internet Explorer встроен в операционную систему Windows и неопытные пользователи даже не подозревают о наличии альтернативы.
  • Корпоративные пользователи с ограниченным доступом не могут самостоятельно обновить версию или сменить браузер.
  • Обновление IE до новой версии происходит через систему Windows Update, которая часто отключается по требованиям безопасности или для снижения интернет-трафика.
  • Некоторые приложения, например, банковские, могут быть «заточены» для работы только под конкретную версию IE.
  • В силу инерции мышления, когда пользователю нравится та программа, с которой он привык работать.

Библиотека minify

Влад Мержевич

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

Данное противоречие решается наличием двух версий CSS-файла: один для редактирования, а второй для загрузки на сервер. Сам же процесс сокращения кода называется минимизацией и вполне автоматизирован с помощью специализированных программ или сетевых сервисов. Но если приходится часто вносить изменения в CSS-файл, то процесс минимизации становится неудобным. Сами посудите, вначале надо отредактировать файл, затем его минимизировать и полученный код сохранить в файл, который нужно залить на сервер. Слишком много действий приходится совершать ради одного изменения. Логичнее было бы возложить задачу минимизации на сайт. Загрузили файл на сервер, и вот он уже в компактном виде отдается посетителям. Одно из таких универсальных решений называется minify, это библиотека на PHP5. Она минимизирует, объединяет и кэширует CSS-файлы, а также JavaScript.

Форматирование кода CSS

Влад Мержевич

Существует множество разных подходов, как же писать CSS-код. Кто-то упорядочивает селекторы по блокам, другой согласно структуре документа, третий по алфавиту. На форуме после обсуждения этого вопроса выявилась вполне закономерная тенденция — сколько людей, столько и мнений. Поэтому предлагаю ознакомиться с онлайновым инструментом, который форматирует CSS-код сразу четырьмя разными способами. А вы уж сами решайте, какой из них вам симпатичнее.

Opera 11

Влад Мержевич

Если посмотреть статистику использования браузеров в Рунете, то можно однозначно заявить, что IE постепенно сдает свои позиции, а на первое место выходят Firefox и Opera. Даже сложив между собой разные версии браузеров, получим, что лидер сменился и суммарное использование Opera и Opera Mini, выше, чем у всех остальных браузеров, включая Internet Explorer. Возможно, не очень корректно учитывать браузер для мобильных устройств, тем не менее, тенденция очевидна. В остальном мире влияние Оперы не столь впечатляюще, но в Рунете этот браузер любят и активно используют люди самых разных профессий. Очередная, одиннадцатая версия Оперы должна укрепить лидерство браузера и, возможно, переманить к себе сторонников Internet Explorer и Firefox.

Если сравнивать с предыдущей версией 10.63, то каких-то глобальных изменений не заметно, однако сделан большой шаг вперед по отношению к десятой ветке в целом. Интерфейс стал удобнее, красивее и вобрал в себя последние тенденции разработчиков браузеров. Поскольку меня Опера интересует в первую очередь как разработчика, я кратко опишу некоторые новые возможности и подробнее остановлюсь на вещах, связанных с созданием сайтов.

Понятие потока

Влад Мержевич

В HTML формирование элементов на странице происходит сверху вниз согласно схеме документа. Слой, размещенный в самом верху кода, отобразится раньше слоя, который расположен в коде ниже.  Такая логика позволяет легко прогнозировать результат вывода элементов и управлять им. Порядок вывода объектов на странице и называется «потоком». При этом существует несколько возможностей «вырвать» элемент из потока и придать ему почти мифические свойства. Раз он не существует в потоке, то в коде его можно описать где угодно, а также выводить в заданное место окна.

Добавить в избранное

Влад Мержевич

Одно время на сайтах была популярна ссылка «Добавить сайт в избранное», при нажатии на которую адрес сайта заносился в закладки браузера. Впрочем, почему была? Периодически на сайтах подобная ссылка встречается до сих пор. Беда в том, что используемый для этой цели скрипт не работает во многих браузерах, поэтому его ценность близка к нулю. В HTML5 расширились возможности атрибута rel тега <a> и теперь с его помощью можно легко добавлять в избранное любые сайты и отдельные страницы.

Добавление предложений в поисковый плагин

Влад Мержевич

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

Поиск по сайту через Google и Яндекс

Влад Мержевич

Поиск на сайте, где много информации, это один из способов отыскать и прочитать нужный материал. Эта мысль настолько очевидна, что никакого подтверждения не требует, поэтому практически во все системы управления сайтом поиск вставлен по умолчанию. Как быть, если подобный поиск по каким-либо причинам не устраивает или вообще отсутствует? Позаимствовать систему поиска у Google или Яндекса. И у той и другой компании есть прекрасные средства для организации поиска по одному или нескольким ресурсам.

Поисковый плагин для сайта

Влад Мержевич

В интерфейс браузера Firefox, начиная с версии 2.0 встроена строка поиска, позволяющая без захода на сайт вводить поисковые запросы к Гуглу, Яндексу и другим системам. Идея оказалась удачной и ее впоследствии подхватили разработчики других браузеров. Несмотря на то, что подобным поиском пользуются многие, включая и создателей сайтов, большинство из них не подозревают, насколько просто и легко сделать собственный поисковый плагин для сайта. Плюсов у такого плагина несколько: пользователи начинают активнее использовать поиск, возрастает количество посетителей, повышается результативность сайта, улучшается юзабилити. Главное, что затрат практически нет. Если на сайте используется поиск, «прикрутить» для него плагин раз плюнуть.

Стильные чекбоксы не для всех

Влад Мержевич

Флажком, или на жаргоне разработчиков чекбоксом, называется элемент <input type="checkbox”>, который создает поле для проставления галочки. Это поле имеет два состояния — отмечена галочка или нет — и во всех браузерах выглядит практически идентично, поскольку чекбоксы зависят от операционной системы. По этой причине стилизовать этот элемент довольно трудно, например, фоновый рисунок отображается только в браузерах IE и Opera. При этом результат выглядит настолько нелепо, что добавлять какие-либо стили отпадает всякое желание. Имитировать работу чекбокса можно конечно с помощью скриптов, используя стандартный элемент вроде <span>, его как раз стилями легко превратить во что угодно. Однако не будем искать простых путей и сделаем все красиво через CSS 3, пусть это даже работает только в Safari и Chrome.

Полупрозрачный фон

Влад Мержевич

Частичная прозрачность при правильном ее использовании весьма эффектно смотрится в дизайне сайта. Главное, чтобы под полупрозрачными блоками был не однотонный рисунок, а изображение, именно в этом случае прозрачность становится заметной. Такой эффект достигается разными способами и если вспоминать все, включая старомодные методы, то это использование рисунка PNG в качестве фона, создание клетчатого изображения и свойство opacity. Но как только возникает необходимость сделать в блоке полупрозрачный фон, у этих методов оказываются неприятная оборотная сторона. Сделаю небольшой обзор, чтобы стало понятно, о чем идет речь, а также для тех читателей, которые не знакомы с нетрадиционными вариантами создания эффекта полупрозрачности.

Страницы

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.