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

Именно поэтому я дам определение данному термину и подробно опишу, что это такое, объясню, почему возникает проблема разного отображения одного и того же сайта на html и css в и дам несколько полезных советов. Давайте начнем разбор полетов!

Кроссбраузерность, покажи свое лицо!

Все из вас знают английское название термина «кроссбраузерность»: cross-browser. В дословном переводе это означает: «работающий во всех браузерах». Вот по сути и была названа главная цель кроссбраузерности: способствовать идентичному отображению в любом существующем браузере.

Это означает, что независимо от того, в каком ППО для просмотра вы откроете сервис, его стилевая разметка не должна измениться.

Почему же все такие проблемные?

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

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

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

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

И к третьей проблеме можно отнести в некотором роде халатность самих разработчиков. Что я подразумеваю под этим? Всего лишь несоблюдение стандартизированных правил, которые были установлены специальной организацией W3C (официальный сайт расположен по ссылке https://www.w3.org).

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

Рецепты для решения проблем с идентичностью отображения

Познакомившись с основными «камнями преткновения» на пути к кроссбраузерности, вы, вероятно, задали себе вопрос: «А как же тогда сделать сайт, функционирующий во всех браузерах одинаково?». Чтобы ответить на этот вопрос, я решил перечислить базовые решения и полезные советы по порядку.


На самом деле можно еще много чего написать на эту тему. Но я считаю, что на данном пункте полезных рецептов стоит остановиться, так как о важных моментах я вам рассказал.

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

С уважением, Роман Чуешов

Прочитано: 106 раз

Почему не один?

Справедливый вопрос заключается в том, почему нельзя было придумать один единственный способ и развивать его? Но люди – существа разные, поэтому они придумали разные способы. На самом деле их не так много, к тому же некоторые сегодня устарели. Давайте рассмотрим основные методы верстки.

Таблица

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

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

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

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

Альтернатива. Не так давно в CSS появились специальные значения свойства display, которые позволяют имитировать таблицу, используя на самом деле блоки. Например, display: table, display: table-row, display: table-cell. Элементы, к которым применяться эти свойства, начнут вести себя как таблица, ряд таблицы и ячейка соответственно. Нужно скачать, что и этот метод несовершенен, потому что не совсем одинаково поддерживается во всех браузерах. Если вы используете эти свойства, нужно тщательно тестировать на кроссбраузерность.

Фреймы

Когда-то существовал еще один метод верстки, но сегодня о нем практически забыли. Суть верстки с помощью фреймов заключается в том, что окно браузера делится на определенное количество независимых блоков (фреймов), которые формируются тегом frameset. Там указывается путь к html-страничке, которая будет загружена в фрейм.

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

Рис. 1. Такой вот пример сайта на фреймах я нашел в сети. Как вы понимаете, никакой эстетики.

Блоки

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

Достоинства. Исключительно компактный код, который отлично читается, даже если верстали не вы. К блокам легче привязывать различные стили, чем к таблицам. Такой сайт быстрее загружается и лучше индексируется.

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

Недостатки. Их практически нет. Блоки легко адаптировать, они легко скрываются и изменяются. Контейнеры div и span правильно отображаются даже в старых браузерах. Если же говорить о новых семантических блоках, то у них нет полной поддержки. Впрочем, наверняка уже скоро эта проблема будет решена. Уже сегодня существуют файлы, подключение которых решает проблему поддержки новых элементов в старых браузерах. Метод блочной верстки будет существовать еще долго из-за его исключительного удобства и простоты.

Флексбоксы (flex)

Самый новый метод верстки. Нормальную поддержку в браузерах впервые получил с 2014 года. Теперь многие разработчики придерживаются именно этого метода. Суть его в том, что структурным элементам прописывается display: flex. Это тоже своего рода блоки, только более гибкие и функциональные.

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

Скорее всего, в будущем флексбокс окончательно утвердится как новая методика верстки сайтов, поэтому стоит уже сейчас изучать свойства этого элемента.

Рис. 2. Свойства flex-элементов делают их более гибкими, чем блоки.

К достоинствам флексбоксов можно отнести новые css-свойства, которые позволяют выстраивать разнообразные сетки и колонки без особых усилий. Также поддерживается вертикальная центровка, которую не поддерживает обычный блок.

Заключение

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

Фреймы давно отброшены как неудачный способ создания структуры, но тег iframe вполне может пригодиться вам, если вдруг понадобится вставить в статью другой сайт.

Наконец, сегодня мы имеем абсолютно новый способ верстки – элемент flex и его свойства, которые делают его более гибким и современным, чем привычный block. На этом на сегодня все. Не забывайте читать новые статьи на блоге, чтобы знать все о сайтостроении.

Вы знали, что 40% пользователей покидают сайты с плохим дизайном? Зачем терять прибыль? Выберите и установите прямо сейчас один из 44 тысяч премиум шаблонов для сайтов. Идеальный выбор для вашего бизнеса!

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

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

Решились создавать сайт c версткой? Специально для вас моя сегодняшняя коллекция из топовых и самых современных версток для корпоративного или личного использования, творчества и интернет-торговли. Здесь вы отыщите любой вариант для своих задач!

Современная верстка сайта со стильным дизайном премиум класса

Современная верстка для различных видов сайта

Verso – уникальный HTML-шаблон на базе Bootstrap 4

Очень классная верстка, которая включает в себя 19 демо-сайтов с особенным дизайном. Просто настраивается и адаптируется под сайты в различных областях деятельности.

LeoHunt – адаптированная верстка для любых целей на HTML5

Тема разработана с адаптацией под работу на мобильных устройствах. Имеет чистое оформление в 12 вариантах основной страницы, 3 видах одностраничника и двух макетах. Доступны идентичные шаблоны на Joomla и WordPress .

RaiseApp – отзывчивая тема для разнообразных видов применения

Это верстка с целым набором UI-компонентов (2000+), которая позволит построить отличный лэндинг или классический многостраничный сайт для стартапа, блог, а также личный или корпоративный сайт. Новичкам понравится версия под WordPress .

Matex – комплект готовых страницы для крутого сайта в стиле материального дизайна

Творчески оформленная концепция сайта, сверстанная в формате HTML5, позволит вам создать сайт для любого бизнеса и применения: архитектурное бюро, пекарня, университет, строительная компания и портфолио.

Honshi – креативный многозадачный шаблон сайта

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

Современная верстка сайта под бизнес

SaaSera – верстка для разработчиков и стартапов

Вместе с темой вы получаете целый набор решений для различных сфер: IT, веб-разработка, создания программных продуктов и так далее. Дизайн очень красивый, красочный и креативный.

Разработчикам будет гораздо проще создать сайт на .

TechLine – шаблон для корпораций, компаний и стартапов

Элегантный и простой шаблон бизнес направленности в любой сфере построен на базе модульной рамки Y с набором из 1000 опций для гибкой настройки. Сотни страниц, десятки концепций портфолио и тысячи иконок в комплекте. WordPress версия для новичков.

TeraHoster – профессиональная тема хостинговой компании

В тему добавлено 4 концепции оформления главной страницы, а также варианты других страниц. Интегрированная поддержка WHMCS.

У нас также доступны классные под систему WordPress.

Industrial – шаблон отличного сайта промышленной компании

Эта концепция оформления предназначена для сайтов компаний, работающих в области технологий, промышленности и производства. Полностью адаптивный макет и 11 вариантов дизайна.

ConstructZilla – верстка сайта строительной компании с чистым дизайном

Этот эстетически чистый и мобильно-оптимизированный HTML-шаблон позволит вам адаптировать его оформление под индивидуальные нужды бизнеса. Больше 100 HTML-файлов с эффектом Parallax и AJAX-формами.

InBenefit предлагает широкий выбор тем Вордпресс для , промышленных и компаний.

Travel Tour – шаблон для турагентства или сервиса онлайн-бронирования

Это идеальный вариант для сферы туризма, в котором спрятаны стильные концепции, созданные на базе современных технологий. Есть красивые галереи и система рейтинга.

Universal – бизнес-тема для консалтинговых услуг

Universal идеально подойдет различным фирмам в сфере консалтинга и других смежных финансовых областей деятельности. Строгий акцент на мобильную оптимизацию и премиум плагин слайдера без дополнительной платы. Новички будут в восторге от шаблона WordPress .

У нас также можно найти огромное множество обзоров и компаний.

TaxiPark – HTML5-верстка для службы такси или таксопарка

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

В прошлом году для Вордпресса я уже подбирал клевые и стильные . Оцените их прямо сейчас!

Современная верстка сайта для IT и фрилансеров

Maestro – AJAX-шаблон для представления лучших работ

Шаблон имеет уникальные варианты дизайна сайтов творческих студий и фрилансеров, занимающихся различными видами деятельности: графический дизайн, переводы, фотография и копирайтинг. Дополнительно есть версия на WordPress .

Berk – крутой и стильный шаблон под портфолио в духе минимализма

Чистый и профессиональный шаблон для графических дизайнеров и творческих студий. Работает уверенно на любом мобильном и стационарном устройстве. В комплекте несколько видов оформления и слайдер класса «Премиум».

Inshot – отзывчивая тема портфолио фотографа

Это отдельная тема, которая не подошла ни под одну категорию в нашем обзоре. Тем не менее она крутая, ведь позволит вам создать видеосайт с возможностью с просмотров и рекламы. Высокая скорость загрузки и удобный пользовательский интерфейс.

Артём – автор многочисленных обзоров и статей на сайте проекта сайт "Веб-лаборатория успеха", посвященных шаблонам, плагинам, курсам и другим тематикам сайта. Эксперт по подбору шаблонов и плагинов для платформы WordPress и др. Увлечения: чтение интересной литературы и активный отдых.

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

Кстати говоря, такую задачу мы с вами уже решали, когда я писал о .

Казалось бы, что повторяться не стоит, но я и не собираюсь этого делать. Сегодня будет описан принципиально другой способ верстки сайта , а также параллельно рассмотрим назначение директив @import и @media (с впереди) в уже изученном нами (на базовом уровне, конечно же) языке стилевой разметки CSS.

Верстка сайта на блоках — а оно вам надо?

Более того, мы с вами на текущий момент уже успели разобрать и язык Html по косточкам, опираясь при этом на первоисточник в лице консорциума . Однако, думаю, что не все прониклись моими увещеваниями и сразу же бросились изучать , а также .

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

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

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

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

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

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

Ладно, продолжим с теми кто не переключился. Как построить макет сайта с помощью элементов Div и стилевых правил? Давайте посмотрим. Естественно, что имитировать работу этого макета мы будет на локальном компьютере, просто свалив все нужные нам файлы в одну из его папок. Никаких хостингов и . Для понимания принципов это будет излишним.

Итак, приступаем к верстке. Для начала создаем и обзываем папку для хранения файлов нашего будущего веб проекта, а затем создаем внутри нее текстовый файлик с расширением.html и названием index. Также создаем внутри этой папки еще одну, которую обзываем CSS (в ней будут жить наши внешние файлы стилей).

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

Ну, а теперь скопируйте приведенную чуть ниже «рыбу» в свой index.html. Для работы с кодом довольно удобно использовать , хотя, при обладании навыком работы, более функциональным решением может оказаться Дримвьювер:

Главная

Вначале как всегда должна идти , назначение которой подробнейшим образом описано в приведенной по ссылке статье. Внутри тега meta мы указываем для его правильной интерпретацией браузером, при открытии в нем нашего проекта. Каждый документ в должен иметь заполненный (заголовок страницы), поэтому мы и его добавили в «рыбу».

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

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

Следовательно, переполнение левой или правой колонки не вызовет пропорциональное увеличение блоков с ID vnutr и vnesh (плавающие элементы на высоту своих родителей или, другими словами, контейнеров не влияют), а значит контент вылезет за их пределы, наедет на футер и вообще выйдет за границы макета. Беда.

Но у нас имеется четвертый блочный элемент с ID podporka, который не содержит никакого контента (а значит и не будет виден на веб странице) и которой предназначен именно для устранения этого казуса. В коде obdhiy.css мы пропишем для этого селектора простое правило . Вследствие этого блок с ID podporka приобретет полезное нам свойство — он будет учитывать любой плавающий перед ним элемент (имеется в виду, расположенный выше в коде).

Т.о. при увеличении контента в правой или левой колонке произойдет пропорциональное смещение вниз элемента с ID podporka, а т.к. этот тег уже не является плавающим, то блоки с ID vnutr и vnesh будут его учитывать и пропорционально увеличивать свой размер по вертикали:

Теперь вроде бы все работает правильно. Однако, наша верстка сайта еще не закончена. Допустим, что мы сделали в index.html таким образом макет главной страницы, а вот для какого-нибудь другого раздела вид макета должен будет отличаться (например, там должно быть не три, а только две колонки). Как выходить из этой ситуации?

Понятно, что для этой цели придется использовать отличный от index.html файл. Для этого содержимое index.html можно скопировать в новый файлик, например, razdel.html, т.к. править уже существующий код будет проще, чем писать его заново.

Ну и файлик с таблицами каскадным стилей нам придется новый использовать, например, razdel.css. Вот именно в них мы и будем вносить изменения, а заодно посмотрим поподробнее, как же именно использовать директиву @import в таких случаях.

Давайте начнем с razdel.html:

Раздел ...

Мы изменили заголовок страницы Title и поменяли название подключаемого файлика стилей на razdel.css. При этом, естественно, необходимо будет в папке CSS этот самый файл стилевой разметки создать. Осмелюсь вам напомнить, что для index.html мы подключали стилевую разметку через osnovnoy.css, в котором была прописана одна единственная директива @import для подгрузки правил из файлика obdhiy.css:

@import url(obdhiy.css);

Мы не будем оригинальными в нашей умной версте и в самом начале нового (еще пустого) стилевого файла пропишем абсолютно такую же директиву. Тем самым мы получим опять-таки трехколоночный макет, однако, дописав чуть позже всего несколько правил, мы запросто превратим его в двухколоночный. Даже не так. Мы создадим еще один файлик в папке CSS с названием dvekolonki.css и следующим содержанием:

#right { display:none; } #center { margin-right:0; } #vnesh { background-image: none; }

Что мы сделали? Мы запретили отображать правую колонку на веб страницы с помощью . Так же мы убрали внешний отступ справа для центральной колонки, ибо в нем уже нет необходимости. Ну и в завершении мы запретили показывать фоновую картинку все в той же правой колонке. В общем, мы эту правую колонку в нашем макете раздела полностью аннигилировали.

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

@import url(obdhiy.css); @import url(dvekolonki.css);

Все правила, стоящие в коде ниже (из dvekolonki.css), будут иметь приоритет более высокий, а значит именно их действо мы и будет наблюдать на веб странице. В результате при открытии razdel.html вы уже сможете наблюдать двухколоночный вариант макета:

Собственно, дополнительной нашей задачей было рассмотреть варианты использования директивы @import в современной верстке сайтов , с чем, я считаю, мы справились.

Теперь еще осталось продемонстрировать работу директивы @media, о которой я заикнулся в начале статьи. К верстке она имеет весьма опосредованное отношение, но все же не сказать о ней было бы, наверное, недальновидно.

Верстка макета для печати с помощью директивы @media

Директива @media может пригодиться не вам, а вашим читателям, которые захотят распечатать вебстраницу без всяких там графических изысков и лишней информации. Пользователям при этом нужен будет только контент, который расположен в центральной колонке. Шапка, футер, левая и правые колонки ему не нужны — только текст статьи.

При предварительном просмотре печати в любом из современных браузеров можно, конечно же, отключить печать фона, т.е. цветового оформления, но обозреватель не всегда сможет отделить самостоятельно зерна (контент) от плевел (навигации), поэтому нам придется ему в этом помочь, чтобы не надеяться на авось.

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

Таким образом пользователь, распечатавший такую вебстраницу, никогда не узнает, а какой блог все же является самым лучшим. Итак, давайте займемся нюансами верстки для печати , и в этом нам поможет уже упомянутая директива @media.

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

У атрибута media можно использовать и другие значения:

  1. all — используется по умолчанию и означает, что данный файл стилей нужно будет использовать для абсолютно любых устройств вывода
  2. braille — устройства для чтения пальцами (для слепых или слабовидящих)
  3. handheld — КПК, смартфоны и прочая мелочь
  4. print — принтеры
  5. screen — экраны мониторов пользователей, на которых они будут просматривать ваш сайт
  6. speech — речевые браузеры
  7. projection — проекторы
  8. tty — телетайпы и прочая рухлядь, на которой нельзя использовать размерность в пикселах
  9. tv — старый добрый телевизор

В приведенном чуть выше примере мы, с помощью атрибута Media, подключили к веб документу отдельный файл стилей для отображения на мониторе и отдельный для вывода на печать (print.css). Нам как раз подобное и нужно реализовать в этом уроке верстки, но лучше будет сделать это немного другим способом, с использованием именно директивы @media прописанной в файле стилей.

Если вы обратили внимание, то при таком способе верстки, который выбрали мы (с использованием @import), у нас имеется общий файлик стилей, который подключается всегда через эту самую директиву — obdhiy.css. Вот именно в нем мы и начнем колдовать.

@media имеет свой собственный синтаксис:

@media screen, tv{ набор селекторов и правил, которые будут выполняться только в случае вывода веб страницы на указанные чуть выше через запятую устройства }

В нашем файлике obdhiy.css не будем заключать все уже имеющиеся правила внутрь директивы @media screen, достаточно в самом его конце просто дописать необходимые CSS правила для вывода документа на печать с помощью @media print :

@media print{ *{ color:#000 !important; background:transparent !important; } html { font:10pt serif; } #footer, #header, #left, #right { display:none; } #center { margin:0; } a:after{ content:" (" attr(href) ")"; } }

Если вы помните, то селектор * означает применение всех этих стилевых правил для абсолютно всех элементов Html кода. Правда такой селектор имеет минимальный из возможных приоритетов, поэтому задавая цвет для всех элементов черным, а фон прозрачным, с помощью правил color и background, мы вынуждены не доводить дело до подсчета приоритетов с помощью установки .

Для селектора Html мы прописали задание умолчательного шрифта в , ибо принтеру так понятнее. Ну и шрифт задали любой с засечками (serif). C помощью display:none мы запретили отображения обвеса (шапки, футера и колонок), а с помощью margin:0 разрешили контенту из средней колонки занимать все доступное пространство по ширине.

Последний селектор a:after заковырист и, чтобы лучше понять о чем именно он говорит, советую пробежаться по следующим публикациям про () и . Но нужен он нам для довольно простой цели — увидеть на бумаге, куда именно ведут гиперссылки .

Псевдоэлемент after позволяет осуществлять генерацию контента во время построения документа браузером. After позволит нам добавить URL адрес гиперссылки сразу после того места, где эта самая ссылка проставлена. Делается это с помощью специального CSS правила content, которое работает только для двух псевдоэлементов: after и before.

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

1. Вёрстка сайтов и Windows 8

На днях, коллега выложил в социальной сети скриншот видеохостинга “Youtube”, с вопросом:
“Никто не в курсе, что за беда с Ютюбом? Почему он забился в левый угол? Нафига столько свободного места на главной?"

После некого мозгового штурма, мне пришло в голову, что скорее всего на это как-то повлиял новый интерфейс новой версии операционной системы Windows. Думаю, что все таки я прав, т.к. самая функциональная панель Windows 8 всплывает с правой стороны и сразу съедает 378 px от области просмотра окна, соответственно, чтобы на экране было максимальное количество полезной информации, компания Google стала смещать полезную верстку влево. Это хорошо видно при разрешение экрана от 1388px по длинной стороне

Как можно увидеть, при смещении верстки влево, функциональной панелью не перекрывается главное содержимое (видео в стандартном представлении.

2. Теги HTML5

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

Например у на есть такой код:
Тест HTML5

LoremIpsum










Копирайт@12

Во всех современных браузерах (IE9/10, Chrome, Firefox, Opera, Safari5) данный код отображается корректно:

Но в нашем «любимом» Internet Explorer с кодом уже возникаю проблемы, и стили перестают срабатывать.

После разных способов задать стили в у меня получилось только привычным способом - это элемент div, которому задается класс. Поэтому я предлагаю взять за некоторое правило (возможно уже кто-то взял, но для себя я только недавно обнаружил этот момент), что в случае необходимости верстки для IE8 и младше, стоит в брать div и назначать ему имя класса, в соответствии с тегом в спецификации HTML5:

Тест HTML5

LoremIpsum
Боковая панель.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis felis eu velit dignissim in fermentum justo cursus. Suspendisse potenti.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis felis eu velit dignissim in fermentum justo cursus. Suspendisse potenti. Aenean odio quam, egestas rhoncus posuere at, imperdiet vel sem. Curabitur in nisl neque, ac porttitor arcu. Sed sed est lectus, in egestas nisi. Morbi turpis urna, feugiat fermentum condimentum quis, congue non quam. Vivamus auctor ultricies tincidunt. Pellentesque eget nunc tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante justo. Sed ornare diam sit amet risus convallis mattis. Fusce a augue sit amet felis vehicula iaculis. Nunc lectus lectus, pretium id pulvinar sit amet, pulvinar a metus. Nam ultrices lobortis erat, et mollis odio tristique vel. Suspendisse nec massa dui, nec tempus sapien.

Donec congue lorem id orci congue vel interdum orci pellentesque. Vivamus nec orci vitae diam scelerisque faucibus id dictum felis. Vivamus dictum rhoncus ipsum, vel tempor sapien aliquet vel. Vestibulum lobortis sodales leo, ut lobortis ligula tristique nec. Mauris vitae dolor leo, vehicula semper ligula. Nam sed orci leo. Sed auctor iaculis mauris non pretium. Vestibulum eros tortor, consectetur id varius et, porta in magna.

Fusce vel turpis turpis. Cras dapibus neque et quam cursus euismod. Donec justo felis, scelerisque quis ornare nec, aliquam ut mi. In est augue, vestibulum ac volutpat id, laoreet vitae diam. Proin non libero ac libero ultrices tristique ac in neque. Nam nec lacus id erat volutpat iaculis. Nam dapibus fringilla adipiscing.

Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus interdum lorem a sem rutrum vulputate. In est felis, consequat ut malesuada sed, volutpat quis purus. Sed non urna eget metus ornare condimentum ac quis diam. Quisque eleifend dapibus ligula, at mollis justo tristique tempus. Morbi viverra vehicula nisi, vel aliquam lacus malesuada eu. Sed pulvinar eros et quam sodales ullamcorper. Donec volutpat magna vel massa lobortis scelerisque.

Nulla mattis pharetra elit, eu dapibus orci fringilla tempus. Donec vel sodales elit. Ut non justo at purus facilisis interdum. Fusce porttitor feugiat lacinia. Aliquam a tortor metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc malesuada auctor nisl non vehicula. Nulla nec eros eget leo vestibulum rhoncus. Praesent rhoncus sapien eget turpis mollis et scelerisque urna consectetur. Fusce ullamcorper tempus vehicula. Integer mauris mauris, eleifend quis ultrices nec, hendrerit vel urna. Suspendisse malesuada magna non lacus imperdiet egestas. Integer condimentum libero at diam tincidunt luctus. Duis eget erat in sem dictum tempus quis eget nisl. Donec nisl lacus, lobortis non facilisis a, ultricies in quam.

Копирайт@12
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Вывод:

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

P.S. Прошу сильно не бить, первая статья на хабре.

Теги: Верстка, HTML, веб-дизайн