CSS может быть сложным, и с выходом каждой новой версии браузера вы можете столкнуться с необходимостью идти в ногу с последними советами и хитростями. Но эти советы и хаки спасут ваше здравомыслие! Здесь я собрал десять советов, которые я считаю наиболее полезными, чтобы избавить вас от хлопот по поиску решений в Интернете в условиях ограниченного времени.
1. Блок против встроенных элементов уровня
Почти все элементы HTML являются блочными или встроенными элементами. Характеристики элементов блока включают в себя:
- Всегда начинай с новой строки
- Высота, высота строки и верхние и нижние поля могут быть изменены
- Ширина по умолчанию равна 100% содержащего их элемента, если ширина не указана
Примеры элементов блока включают в себя <div> , <p> , <h1> , <form> , <ul> и <li> . С другой стороны, характеристики встроенных элементов противоположны элементам блока:
- Начните с одной линии
- Высота, высота строки и верхние и нижние поля не могут быть изменены
- Ширина равна длине текста / изображения и не может быть изменена
Примеры встроенных элементов включают в себя <span> , <a> , <label> , <input> , <img> , <strong> и <em> .
Чтобы изменить статус элемента, вы можете использовать display: inline или display: block . Но какой смысл менять элемент с блочного на встроенный или наоборот? Ну, на первый взгляд может показаться, что вы вряд ли когда-нибудь воспользуетесь этим приемом, но на самом деле это очень мощная техника, которую вы можете использовать, когда захотите:
- Начать встроенный элемент с новой строки
- Элемент блока должен начинаться на одной строке
- Управление шириной встроенного элемента (особенно полезно для ссылок навигации)
- Управлять высотой встроенного элемента
- Установите цвет фона по ширине текста для элементов блока без указания ширины
2. Еще одна альтернатива модели Box Box
Хакерская модель используется для исправления проблемы рендеринга в браузерах до IE 6 на ПК, в результате чего границы и отступы включаются, а не добавляются в ширину элемента. Ряд решений на основе CSS был предложен, чтобы исправить это; вот еще один, который мне действительно нравится:
padding: 2em; border: 1em solid green; width: 20em; width/**/:/**/ 14em;
Первая команда ширины читается всеми браузерами; второй всеми браузерами, кроме IE5.x на ПК. Поскольку вторая команда идет второй, она имеет приоритет над первой: любая команда, которая идет второй, всегда будет иметь приоритет перед предыдущей командой. Итак, как все это работает?
Размещая пустые теги комментариев ( /**/ ) перед двоеточиями, мы инструктируем IE5.0 игнорировать команду. Аналогично, если мы поместим пустые теги комментариев после двоеточия, IE5.5 проигнорирует команду. Используя эти два правила в сочетании друг с другом, мы можем скрыть команду от всех браузеров IE5.x.
3. Минимальная ширина для страницы
Очень удобная команда CSS, которая существует, — это команда min-width, с помощью которой вы можете указать минимальную ширину для любого элемента. Это может быть особенно полезно для указания минимальной ширины страницы.
К сожалению, IE не понимает эту команду, поэтому нам нужно найти новый способ заставить эту функцию работать в этом браузере. Сначала мы вставим <div> под <body> , так как мы не можем назначить минимальную ширину для <body> :
<body> <div class="container">
Далее мы создаем наши команды CSS, чтобы создать минимальную ширину 600 пикселей:
#container { min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" ); }
Первая команда — это обычная команда минимальной ширины; вторая — короткая команда JavaScript, которую понимает только IE. Обратите внимание, что эта команда приведет к тому, что ваш CSS-документ станет недействительным; Вы можете предпочесть вставить его в заголовок каждого HTML-документа, чтобы обойти это.
Вы также можете объединить эту минимальную ширину с максимальной:
#container { min-width: 600px; max-width: 1200px; width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto"); }
4. IE и ширина и высота вопросы
У IE довольно странный способ делать вещи. Он не понимает команды min-width и min-height, но вместо этого интерпретирует ширину и высоту как min-width и min-height.
Это может вызвать проблемы, потому что нам может потребоваться изменить размеры блоков, если нам нужно разместить больше текста в них, или если пользователь изменит размер текста. Если мы будем использовать только команды ширины и высоты для блока, браузеры, отличные от IE, не позволят изменить размер блока. Однако, если мы используем только команды min-width и min-height, мы не можем контролировать ширину или высоту в IE!
Это может быть особенно проблематично при использовании фоновых изображений. Если вы используете фоновое изображение шириной 80px и высотой 35px, вам нужно убедиться, что размер по умолчанию для блока, использующего это изображение, равен точно 80 x 35px. Тем не менее, если пользователи изменят размер текста, размер поля будет необходимо изящно увеличить.
Чтобы решить эту проблему, вы можете использовать следующий код для поля с class="box" :
.box { width: 80px; height: 35px; } html>body .box { width: auto; height: auto; min-width: 80px; min-height: 35px; }
Все браузеры будут читать первое правило CSS, но IE будет игнорировать второе правило, потому что оно использует дочернюю команду селектора . Браузеры без IE читают второе, что переопределяет значения из первого правила, потому что это правило CSS более специфично, а более специфичные правила CSS всегда переопределяют менее специфичные.
5. Команда преобразования текста
Одной из менее известных, но действительно полезных команд CSS является команда text-transform . Вот три наиболее распространенных значения этого правила: text-transform: uppercase , text-transform: lowercase и text-transform: capitalize . Первое правило превращает все символы в заглавные буквы, второе превращает их все в маленькие буквы, а третье делает первую букву каждого слова заглавной.
Эта команда невероятно полезна для обеспечения согласованности стиля на всем веб-сайте, особенно если в нем есть несколько редакторов контента. Скажем, например, ваш гид по стилю требует, чтобы слова в заголовках всегда начинались с заглавных букв. Чтобы убедиться, что это всегда так, используйте text-transform: capitalize. Даже если редакторы сайта забудут о капитализации, их ошибка не будет отображаться на сайте.
Также предпочтительнее использовать преобразование текста: заглавные буквы для прописных слов, так как программы чтения с экрана могут произносить короткие слова заглавными буквами как сокращения. Отличным примером этого является «Связаться с нами», который некоторые программы чтения с экрана произносят как «контакт U S».
6. Исчезающий текст или изображения в IE?
IE показывает очень странную ошибку, из-за которой текстовые или фоновые изображения иногда исчезают из поля зрения. Эти элементы все еще присутствуют, и, если вы выделите все на экране или нажмете кнопку «Обновить», они будут часто появляться снова. Что-то странное, а?
Эта проблема в основном возникает на фоновых изображениях и на тексте, расположенном рядом с плавающим элементом. Чтобы устранить проблему, просто вставьте position :lative в команду CSS для исчезающего элемента, и по какой-то странной причине это обычно решает проблему. Если это не работает (а иногда нет), присвойте ширину нарушающему элементу в CSS — это должно решить проблему.
7. Невидимый текст
Иногда вы можете захотеть сделать текст невидимым. Невидимый текст может быть особенно полезен для пользователей программ чтения с экрана, например, для назначения метки элементу формы или вставки заголовка перед разделом. Не хотите изменить внешний вид, вставив эти элементы? Сделайте их невидимыми, и никто, использующий визуальный браузер, не узнает, что они там.
Вы также можете захотеть сделать текст невидимым, если используете печатный или ручной файл CSS, поскольку некоторая информация может не отображаться ни на одном из этих носителей (подробнее об этом см. Ниже).
Чтобы сделать текст невидимым, вы можете использовать display: none — easy! Это прекрасно работает для сокрытия текста от карманных компьютеров (если поддерживается CSS) и печатных веб-страниц, но не так хорошо для многих программ чтения с экрана. Программы чтения с экрана теперь становятся слишком умными для их собственной пользы, и некоторые фактически игнорируют любой текст, который имеет display: none правила display: none назначен ему.
Поэтому для пользователей программ чтения с экрана необходим новый подход: position: absolute; left: -9000px position: absolute; left: -9000px Это в основном берет текст и помещает его в 9000 пикселей слева от левого края экрана, что делает его невидимым.
8. Документ CSS для карманных компьютеров
Отдельный документ CSS может быть создан для КПК и мобильных телефонов и активирован только тогда, когда одно из этих устройств используется для доступа к вашему сайту. Все больше и больше веб-сайтов создают отдельные документы CSS для печати , поэтому веб-страницы автоматически становятся удобными для печати , когда пользователи выбирают их печать. Вы можете сделать то же самое для портативных устройств.
Следующая команда используется для вызова документа CSS для карманных компьютеров:
<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld" />
Команды CSS в ручном файле CSS переопределяют любые эквивалентные команды в основном документе CSS. Итак, какие команды вы должны поместить в этот файл?
В идеале вы хотите, чтобы пользователи портативных устройств избегали горизонтальной прокрутки.
Чтобы проверить это, откройте свой веб-сайт в обычном окне браузера и измените его размер до 150 пикселей в ширину. Затем откройте ваш основной файл CSS и вставьте несколько новых команд в самый конец документа. Команды, которые вы здесь размещаете, должны настроить макет веб-сайта таким образом, чтобы он не требовал горизонтальной прокрутки на ширине 150 пикселей. Затем откройте новый документ, вырезайте и вставляйте эти новые команды и сохраняйте его как handheldstyle.css (или как вы хотите его назвать).
Ваши веб-сайты, предлагающие пользователям портативных устройств, должны сильно отличаться от их предложения для традиционных веб-браузеров, поскольку пользовательский интерфейс на портативных устройствах сильно отличается. Для получения дополнительной информации, книга, такая как Handheld Usability , SW Weiss, является отличным чтением.
9. 3-й эффект кнопки
Еще в первые дни Интернета, все трехмерные кнопки, которые казались нажатыми при наведении, были в ярости. В то время этого можно было достичь только с помощью изображений и JavaScript, но теперь, с появлением CSS, мы можем вернуться в прошлое и воссоздать этот трехмерный эффект .
Основные команды CSS, которые вам понадобятся:
a { display: block; border: 1px solid; border-color: #aaa #000 #000 #aaa; width: 8em; background: #fc0; } a:hover { position: relative; top: 1px; left: 1px; border-color: #000 #aaa #aaa #000; }
Помимо этих команд, вы можете вставить другие команды для достижения желаемого эффекта презентации — единственным ограничением является ваше воображение!
10. Одинаковый код навигации на каждой странице
Большинство веб-сайтов выделяют элемент навигации, относящийся к местоположению каждого пользователя на веб-сайте, чтобы помочь пользователям ориентироваться. Это фундаментальное требование для простоты использования, но это может быть проблемой: нам нужно настроить HTML-код позади навигации для каждой страницы. Можем ли мы получить лучшее из обоих миров? Можно ли выделить навигацию на каждой странице, не настраивая HTML-код на каждой странице? Конечно, это!
Прежде всего, вам нужно назначить класс для каждого элемента навигации:
<ul> <li><a href="#" class="home">Home</a></li> <li><a href="#" class="about">About us</a></li> <li><a href="#" class="contact">Contact us</a></li> </ul>
Затем вам нужно будет вставить id в <body> . Идентификатор должен отражать местоположение пользователей на сайте и должен изменяться при переходе пользователей на другой раздел сайта. На странице «Домой» должно отображаться <body id="home"> , в разделе «О нас» — <body id="about"> , а в разделе «Связаться с нами» <body id="contact"> .
Далее вы создаете новое правило CSS:
#home .home, #about .about, #about .about, #contact .contact { commands for highlighted navigation go here }
Это в основном создает правило, которое вступает в силу только тогда, когда class="home" содержится в id="home" , и когда class="about" находится в id="about" а class="contact" находится в id="contact" Эти ситуации будут возникать только в том случае, если пользователь находится в соответствующем разделе сайта, легко создавая наш выделенный элемент навигации.