Всё для создания веб-сайта
Главная | Поиск | Обратная связь | Карта сайта | Версия для печати

Веб-мастеру

RSS

CSS хаки

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

Условные комментарии

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

поддержка браузеров: Internet Explorer все версии

Свойство writing-mode

Основное средство поддержки текстовых потоков для языков отличных от Western
Расширенный вариант writing-mode включён в спецификацию CSS3

поддержка браузеров: Internet Explorer все версии

Вертикальный текст

Необходимо, чтобы текст в ячейках с классом "vertical" при отображении в браузере имел вертикальное направление "снизу-вверх"
Средствами CSS это возможно реализовать только в Internet Explorer, воспользовавшись свойством writing-mode. Для необходимого направления текста придётся воспользоваться фильтрами flipH и flipV
А как же быть с остальными браузерами, которые не поддерживают ни фильтры, ни свойство writing-mode?

Закругляем рамки у блока средствами CSS

Как отобразить закруглённые уголки у блока не используя громоздкие html-конструкции на основе таблиц, либо букет из вложенных div`ов. Неужели нельзя обойтись всего одним блочным тегом
<div class="corners"> ... </div>
убрав все описания в CSS?

PNG-прозрачность в IE

Формат PNG поддерживает глубину цвета в 48 бит на пиксел, отдельный альфа-канал, улучшенное сжатие данных (PNG использует алгоритм сжатия Deflate без потерь информации), возможность использования гамма-коррекции, сохранение компрессированных или некомпрессированных текстовых вставок для хранения информации о копирайте или других целей. Всё это позволяет задавать различную степень прозрачности области изображения
Многие браузеры умеют работать с данным форматом и поддерживают его прозрачность: Mozilla 0.9+ (Firefox, Netscape 6+ ...), Opera 6+, Konqueror 3+, Safari 1.0+ ...
В Internet Explorer 5.5+ для корректного отображения файла *.png к изображению необходимо применить фильтр CSS AlphaImageLoader. Есть несколько вариантов подключения фильтра, все они имеют свои плюсы и недостатки. Рассмотрим некоторые из них

Вырезаем код из страницы и записываем в файл

Есть некая страница, где прямо в теле могут быть такие коды:

<style type="text/css">
   ...
</style>
...

Требуется удалить из тела страницы <style type="text/css"> ... </style>, а само содержимое стиля записать в файл *.css

Установка IE6 и IE7 на один компьютер

При разработке веб-сайта есть необходимость тестировать его во всех популярных браузерах. С установкой браузеров сторонних разработчиков проблем нет - IE, Opera, Mozilla, Netscape, Safari и т.д. спокойно уживаются в одной системе. Но вот IE6 и IE7 это несколько разные версии одного браузера. Ваш сайт может замечательно работать в IE6, а в IE7 веб-страница может быть искажена. Как же проверить сайт в обоих версиях не прибегая к таким ухищрениям как установка другой ОС с отличной версией Internet Explorer`a на борту?

Древовидное меню

Многоуровневое древовидное меню. Несомненным плюсом данного меню является то, что подразделы открываются (скрываются) без перезагрузки веб-страницы.

Checkbox - выделить всё, снять все

При выделении последнего checkbox`a автоматически выделяются все верхние, при снятии галочки с нижнего checkbox`a, с верхних галочка также автоматически снимается

пример работы скрипта:

Что Вас больше всего интересует на нашем сайте?
Справочник HTML
Описание свойств CSS
Примеры готовых JavaScript`ов

отметить все

Авторизация
запомнить меня
Забыли свой пароль?
Поиск по сайту

Самое популярное

Статистика

Если вам понравился наш сайт, будем благодарны за размещение нашей кнопки на страницах Вашего сайта
как выглядит:

Учебник HTML, свойства CSS, сборник JavaScript, PHP скриптов

код нашей кнопки:

регистрация сайта в каталогах Заработай на своем сайте Заработай на своем сайте WOlist.ru - каталог сайтов Рунета