Заметки с меткой «know-how»

  • CSS Global Order — order без Flexbox

    CSS Global Order — авторская JavaScript-библиотека, реализующая поддержку изменения визуального порядка HTML-элементов с помощью стандартного CSS-свойства order без необходимости включения механизма Flexbox (display: flex / display: inline-flex) для их родительского элемента.

    Библиотека работает во всех браузерах, поддерживающих Flexbox, а также в Internet Explorer 7 и выше.

    Объём в минимизированном виде с Gzip-сжатием — 1 КБ.

  • Семантическая HTML-разметка групп DT/DD (+)

    Порой требуется применить стили к каждой отдельно взятой группе элементов DT/DD как единому целому.

    Но заключение элементов DT и DD в обобщённый контейнер типа DIV запрещено спецификацией HTML: их родительским элементом синтаксически корректно («валидно») может быть только DL.

  • Почти родной matchesSelector() для IE8 (+)

    В современных браузерах доступен удобный JavaScript-метод matchesSelector() (в более свежих версиях стандарта переименованный в matches()), позволяющий определить, соответствует ли элемент заданному селектору. Это одна из ключевых возможностей, позволяющих обойтись без библиотек типа jQuery для удобного назначения live-обработчиков событий.

    Internet Explorer поддерживает matchesSelector() (с префиксом ms) лишь начиная с версии 9. Но что делать с IE8, поддерживать который во многих случаях по-прежнему приходится? К счастью, есть компактное решение, не требующее сторонних библиотек.

  • HTML-комментарий как контейнер для данных (+)

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

    Комментарий является самостоятельным DOM-узлом, и его содержимое в виде текста доступно при помощи стандартного свойства любого DOM-узла — nodeValue, либо через его свойство data как объекта DOMCharacterData.

  • Простая JavaScript-идентификация IE 5.x (+)

    Свойство document.compatMode, в относительно современных браузерах содержащее текущий режим рендеринга (CSS1Compat или BackCompat), в IE 5.x просто отсутствует — ведь эти версии IE банально понятия не имеют о существовании стандартов и, соответственно, различных режимов рендеринга. Таким образом, мы можем однозначно идентифицировать («сниффить») IE ниже 6-й версии.

  • Эмуляция наследования размера шрифта таблицами в IE 5.x

    Как известно, таблицы в IE 5.x даже при указании полного DOCTYPE (просто потому, что IE 5.x понятия о нём не имеет) не наследуют размер шрифта от родительского блока.

    Это может вызывать проблемы при использовании относительных размеров шрифтов в целом и приводить к различиям в размере шрифта внутри таблиц в IE 5.x (где размер шрифта таблицами не наследуется) и браузерах с поддержкой веб-стандартов (где размер шрифта наследуется) в частности.

    Тем не менее, недостаток этот легко устраняется при помощи следующего CSS-правила:

    TABLE {font-size: 100%; }