Seditio.by

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

1. Обеспечить простое изменение размеров шрифта для любого элемента
2. Обеспечить адаптацию размера шрифта под пользовательские установки браузера

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

Приведем простой пример:

<ul id="mainNav">
  <li>
    <a href="#">Nav2</a>
    <ul class="hide">
      <li><a href="#">Subnav1</a></li>
      <li><a href="#">Subnav2</a></li>
      <li><a href="#">Subnav3</a></li>
    </ul>
  </li>
  <li><a href="#">Nav3</a></li>
</ul>

Стили для такого фрагмента могут выглядеть примерно так:

#mainNav         {  }
  #mainNav>li    { position:relative; }
  #mainNav>li>ul { display:none; position:absolute; top:30px; left:0; }

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

Часто html верстка сайта требует выравнивания нескольких элементов по центру. Первым вариантом является, конечно:

<p style="text-align:center;">Lorem Ipsum</p>

А что делать если семантика требует использования маркированного списка (unordered list)? Разметка в таком случае будет выглядеть так:

<ul id="someNav">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

Во второй спецификации CSS появилась возможность указывать стили для печати веб-страницы. Для того, чтобы расширить эти возможности, Microsoft и Mozilla при помощи средств вставки "искусственных" разрывов страниц ввели возможность управлять процессом печати из браузеров.

C момента публикации статьи о создании в плагине whosonline активных ссылок для ip-адресов пользователей прошло достаточно времени для того, чтобы фреймворк Котонти стал более гибким и удобным в работе с шаблонами. Задача теперь решается не в пример легче и быстрее. И хак уже не требуется.

Последние несколько проектов мы начали реализовывать с использованием стандартов HTML5 и CSS3. Все всяких сомнений, это не столько модно, сколько удобно и практично. В в то время, как HTML5 способствует логическому структурированию кода, использование CSS3 "подчищает" HTML-код и во многих случаях сводит на нет необходимость в определении классов "ради оформления". Ну и конечно тени, скругления, градиенты и multiple backgrounds, которые позволяют минимизировать использование фотошопа при верстке макетов и ускорить отладку созданных тем.

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

При кодировании ссылки (URL) символ может быть недоступен для ввода с клавиатуры. В других случаях использование символа в URL'е может вызывать конфликты с зарезервированными символами. Именно поэтому символ может быть зашифрован при помощи знака % (процент) и указанного вслед за ним шестнадцатеричного эквивалента в ASCII.

Весьма загадочным и странным остается поведение ie8 в, казалось бы, самых простых ситуациях. После установки и первого запуска браузер категорически отказывается использовать JavaScript в веб-страницах. Наиболее очевидное решение приходит сразу: Tools, Internet Options, Security, Custom Level, Scripting... а здесь самое интересное: Active Scripting уже включено!

При переводе веб сайта на стандарт XHTML 1.1 приходится решать множество вопросов, связанных с валидностью HTML-кода. Формы являются одним их «крепких орешков».

Так, например, совершенно безобидная форма быстрого поиска для CMF Cotonti

<form id="search" action="plug.php?e=search" method="post">
	<input type="hidden" name="a" value="search" />
	<input type="text" name="sq" id="s1" value="Поиск по сайту..." />
	<input type="submit" value="{PHP.L.Search}" id="s2" title="Искать!" />
</form>

Вызовет у валидатора странный вопрос:

Дело в том, что для Strict вариантов XHTML 1.0 и HTML, а также для XTML 1.1 существует ограничение, согласно которому элементы form могут содержать только скриптовые (script) или блочные (block-level) элементы. А поскольку элементы input являются инлайновыми (inline), непосредственно внутри элемента form использоваться они не могут.

Решение проблемы

Все предельно просто: заключим элементы input внутрь блочного элемента p:

<form id="search" action="plug.php?e=search" method="post">
	<p>
	<input type="hidden" name="a" value="search" />
	<input type="text" name="sq" id="s1" value="Поиск по сайту..." />
	<input type="submit" value="{PHP.L.Search}" id="s2" title="Искать!" />
	</p>
</form>

... и получим требуемое: «This document was successfully checked as XHTML 1.1!»

Плагин Whosonline известен каждому пользователю системы управления сайтом Cotonti. Сегодня мы слегка усовершенствуем этот плагин в части блоков WHOSONlINE_ROW1_IS_ADMIN и WHOSONlINE_ROW2_IS_ADMIN, предназначенных для просмотра администратором. Конкретно нас будут интересовать теги WHOSONlINE_ROW1_USER_ONLINE_IP и WHOSONlINE_ROW2_USER_ONLINE_IP, отвечающие за вывод ip-адреса посетителя сайта. Часто администратору необходимо оперативно получить более подробную информацию о данном ip-адресе. Самое простое, что приходит на ум — это плагин ipsearch. Попробуем передать ему ip-адрес.

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

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

Сегодня рассмотрим text-shadow — CSS-свойство, которое появилось еще в спецификациях к CSS 2 в далеком 1998 году, но полноценную поддержку во всех браузерах получило только недавно. Именно по этой причине text-shadow было исключено из CSS 2.1 и будет включено в CSS 3. Text-shadow позволяет получить эффект тени за текущим текстом, но перед его фоном и, несмотря на свое название, чаще используется не для «отбрасывания тени», а для имитации эффекта вдавленности. Но вначале разберемся с терминами.

Пунктирная рамка вокруг ссылок в популярных браузерах Mozilla Firefox и Internet Explorer раздражает многих посетителей веб-сайтов. Поэтому для того, чтобы ваши потенциальные заказчики или клиенты были довольны на 100%, об этом вопросе необходимо позаботиться.

Решение 1: JavaScript

for(var i=0; i<document.links.length; i++) {
   document.links[i].onfocus = function() {this.blur();};
}

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

Решение 2: Псевдокласс :focus

a:focus	{ -moz-outline-style:none; }

Становится теплее. Данный css-код нацелен только на браузеры, базирующиеся на Mozilla. Для пользователей Internet Explorer придется использовать совершенно непродуктивное Решение 1.

Решение 3: Чистый CSS

Здесь существует несколько вариаций, но, чтобы не томить, приведу универсальное решение:

a 	{ outline:none; }

Дополнительно к outlne в свойствах можно указать все, что угодно. Данное решение эффективно работает по обе стороны баррикад: как в Firefox, так и в Internet Explorer.

Что еще?

Для того, самому себе обеспечить комфортный просмотр веб-сайтов в Mozilla Firefox введем в командной строке

about:config

, найдем свойство

browser.display.focus_ring_width

и изменим его значение с 1 на 0.

HTML-сущности чаще всего вызывают вопросы, связанные с валидностью кода. Использование в коде сайта javascript-вставки с оператором && (логическое И) вызывает связанные с ними ошибки: валидатор считает, что вы:

• использовали unescaped символ
• использовали unescaped амперсанд
• где-то не закрыли кавычку

На практике такая ситуация может возникнуть при использовании стороннего плагина со вставками js-кода, например, плагина Slimbox+ImageScale. Однако любителям валидного XHTML не стоит спешить с переделкой javascrip-кода, вызывающего ошибки валидации. Просто закройте скрипт от XML-валидации:

<script type="text/javascript"> 
//<![CDATA[
...
//]]>
</script>

Способ с использованием CDATA не столько красив, сколько радикален, и проблему решает польностью. Что, собственно, и требуется.

Выход Internet Explorer 8 порадовал, пожалуй, только поклонников этого браузера. Верстальщикам и скин-мэйкерам IE8 только прибавил головной боли: HTML-код веб-страниц в этом браузере ведет себя еще более непредсказуемо, чем под IE6.