Поскольку всемирная паутина cтремится к тому, чтобы стать универсальной информационной средой, необходимо учитывать ряд факторов, делающих веб доступным для каждого. На сегодняшний день большое количество телевизионных программ, в большей степени западных, предоставляют субтитры (средства просмотра для глухих), постройки сделаны доступными для передвигающихся с помощью инвалидных колясок, люди с ослабленным зрением имеют возможность прослушивать книги и журналы. В рамках мировых тенденций пришло время вплотную применять те же принципы в веб-проектировании. Перейти к статье…
Наверняка у многих в жизни была ситуация когда надо было определить неизвестный шрифт. Например вам прислали макет где используются нестандартные шрифты которые вы не знаете и вам надо его сверстать. Сервис What the font?! позволяет определить шрифт за пару минут.
Шрифт можно искать по его названию или по производителю. Но главная особенность сервиса — это автоматический определить шрифта. Для этого необходимо загрузить образец шрифта на изображении. Сервис поддерживает наиболее распространенные графические форматы (GIF, JPEG, TIFF, BMP). Максимальный размер изображения не должен превышать 360 х 275 пикселей. Оптимальная высота шрифта на изображении 100 пикселей.
После загрузки изображения анализатор распознает символы.
Если определить шрифт все таки не получилось, можно отправить изображение на форум где вам всегда помогут.
Есть один косячок – нет поддержки кириллических шрифтов. Хотя может я недостаточно поковырялся.
Наткнулся на сервис который показывает неиспользуемые стили.
Анализатор запрашивает CSS файл и HTML страницы для проверки. Парсер сканирует таблицу стилей и ищет селекторы которые не присутствуют на страницах и которые могут быть удалены, тем самым сэкономив несколько килобайт. Следует учесть, что анализатор не понимает Javascript, поэтому если вы добавляете стили с помощью скриптов, то будьте внимательны.
Eric Meyer предложил использовать опредленные CSS правила для выявления ошибок на странице в ходе проектирования. Цель правил визуально показывать ошибки на странице. Например если у ссылки не проставлен адрес она выделяется определенным цветом и сразу обращает на себя внимание.
Вот примеры правил для изображений:
img {outline: 5px solid red;} img[alt][title] {outline-width: 0;} img[alt] {outline-color: fuchsia;} img[alt], img[title] {outline-style: double;} img[alt=""][title], img[alt][title=""] {outline-width: 3px;} img[alt=""][title=""] {outline-style: dotted}
Выглядит это следующим образом:
- Устанавливает всем изображениям красный контур шириной
5px. - Если у изображения есть атрибуты
altиtitle, то ширина контура приравнивается к нулю. - Если изображениее имеет атрибут
alt, контура приобретает цветfuchsia. - Если присутствует атрибут
altилиtitleконтур увеличивается вдвое. - Если у изображения пустой
altи заполненныйtitle, или наоборот, ширина контура становится равной3px. - Если имеются пустой атрибут
altи пустойtitle, контур становится пунктирным.
Посмотреть стили в действии можно на демонстрационной странице.
А вот собственно и полная текущая версия:
div:empty, span:empty, li:empty, p:empty, td:empty, th:empty {padding: 0.5em; background: yellow;} ! important *[style], img, a[href], font, center {outline: 5px solid red;} ! important table, th {border: 5px solid red;} ! important img[alt][title] {outline-width: 0;} ! important img[alt] {outline-color: fuchsia;} ! important img[alt], img[title] {outline-style: double;} ! important img[alt=""][title], img[alt][title=""] {outline-width: 3px;} ! important img[alt=""][title=""] {outline-style: dotted;} ! important table[summary], th[scope="col"], th[scope="row"] {border: 1px solid #AAA;} ! important a[title] {outline-width: 0;} ! important a[title=""] {outline-width: 3px;} ! important a[href="#"] {background: lime;} ! important a[href=""] {background: fuchsia;} ! important
Конечно эти стили не заменят различные утилиты типа Web Developer Toolbar. Но они могут пригодится как еще один полезный инструмент в наборе веб-разработчика.
Условные комментарии используются для написания специальных инструкций которые будут работать только в Internet Explorer не ниже 5-ой версии.
Условный комментарий выглядит следующим образом:
<!--[if IE]> Специальные инструкции для IE здесь. <![endif]-->
Структура похожа на обычный комментарий в HTML, поэтому остальные браузеры будут воспринимать его как обычный комментарий. Explorer распознаёт специальный синтаксис <!--[if IE]>, решает условие if и парсит содержимое условного комментария так, как если бы это было содержание нормальной страницы. Условные комментарии используют синтаксис HTML комментариев, поэтому они могут быть включены только в HTML страницу. Удобно бывает сделать отдельные стили для IE и вставить тег link в условный комментарий.
Ниже написаны несколько условных комментариев, которые показывают версию Internet Explorer, которую вы используете.
<!--[if IE]> Инструкции для Internet Explorer <![endif]--> <!--[if IE 5]> Инструкции для IE 5 <![endif]--> <!--[if IE 5.0]> Инструкции для IE 5.0 <![endif]--> <!--[if IE 5.5]> Инструкции для IE 5.5 <![endif]--> <!--[if IE 6]> Инструкции для IE 6 <![endif]--> <!--[if IE 7]> Инструкции для IE 7 <![endif]-->
В условных комментариях можно использовать операторы, с помощью которых можно задать более комплексное условие. В таблице ниже приведены все операторы.
| Оператор | Описание |
|---|---|
| lt | меньше чем |
| lte | меньше или равно |
| gt | больше чем |
| gte | больше или равно |
И несколько примеров:
<!--[if ! IE 5]> Инструкции для IE 5.5, 6 или 7 <![endif]--> <!--[if gt IE 5.0]> Инструкции для IE 5.5, 6 или 7 <![endif]--> <!--[if lte IE 5.5]> Инструкции для IE 5.0 или 5.5 <![endif]--> <!--[if gte IE 6]> Инструкции для IE 6 или 7 <![endif]--> <!--[if lt IE 7]> Инструкции для IE 5.0, 5.5 или 6 <![endif]-->
По материалам Условные комментарии в CSS и Использование условных комментариев в IE
Loading ...
