Трюки с сайтом на HTML и CSS

На этой странице небольшая подборка приемов, которые используют верстальщики. Это хитрости в HTML и CSS. Материал будет полезен новичкам. Здесь имеется информация о том, как сделать резиновый шаблон на CSS, как запретить масштабирование в браузере и как сделать шаблон сайта кроссбраузерным, как сделать отдельную таблицу стилей для IE.

Запрет на масштабирование

Здесь мы рассмотрим атрибут content тега meta. Он запретит масштабирование страницы мобильной версии сайта. Для этого в секцию head вставьте:

Атрибут name со значением viewport определяет, что этот запрет действует только в мобильных браузерах.

«Резиновое» строение шаблона

Для "резинового" строения необходимо изменить измерения в CSS с пикселов (px) на проценты (%). При этом, он будет отображаться независимо от ориентации смартфона (книжной или альбомной). Рассмотрим пример:

Он позволяет установить элемент с id равным footer для ширины области просмотра 768 пикселов параметр 100%. То есть, он будет отображаться во весь экран независимо от того, скольким пикселам (в данном примере, ориентировано на iPhone) равна ширина просмотра. Это правило не действует для ширины, например 782 пикселов с помощью правила max-width: 768px. Таким образом, min-width: 768px запрещает свойство для ширины <768. На месте width может стоять height, он задаст параметры для максимальной и минимальной высоты области просмотра.

Кроссбраузерность

Кроссбраузерность в наше время очень важна в рекламных целях, ведь добрая четверть пользователей все еще пользуется Internet Explorer'oм, наладившим дела с JavaScript (версия > или =9), но не поддерживающим простой тег comment (вер. >9 и >4). Для добавления стилей для IE, добавьте в head вашего сайта простую строчку:

Это условие будет принято только для версии IE >7 благодаря оператору it. Если вы хотите, чтобы было больше 7 или равна 7, замените его на gte. Он укажет, что свойство действительно для IE > или =7.

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