Думаю, большинство читателей моего блога знают, кто такой Эрик Мейер. Автор Cascading Style Sheets: The Definitive Guide, редактор некоторых известных спецификаций W3C, и вообще весьма известен в мире CSS. Его CSS-Reset файл лёг в основу многих css-фреймворков и т.п.

Пару недель назад у Эрика умерла дочь, Ребекка. И то, что происходит дальше, можно назвать коллективным бессознательным.

Насколько мне известно Ребекка любила фиолетовый цвет (#663399 ), и сообщество разработчиков браузеров посовещались и решили увековечить память о ней в спецификации CSS4 разделе цветов. Закрепив имя цвета rebeccapurple за значением #663399.

Это было настолько буйно принято, что соответствующие патчи уже внесли во все современные движки:

• https://bugzilla.mozilla.org/show_bug.cgi?id=1024642
• http://trac.webkit.org/changeset/170136
• https://connect.microsoft.com/IE/feedback/details/895019/support-beccapurple-as-html-named-color

Правда мнения самого Эрика ещё не спросили, но это мелочи. Любая критика этого решения нынче считается кощунством и осквернением могил.

Лично я не против добавления очередного непонятного имени цвета. Их и так много, с подробным списком можно ознакомиться на сайте Эрика. Меня интересует этическая сторона вопроса. Если бы умер кто-то из близких мне людей и его имя было бы в списке colornames, меня бы использования любого colorname печалило каждый раз. Т.е. в случае Эрика - каждый день.

Такие дела.

Неделю назад, мой друг и коллега Джелу спросил меня, как я отношусь к разметке Schema.org и правильно ли в целях продвижения использовать разметку для картинок которую предлагает яндекс в разделе справки — «Schema.org для Яндекс. Картинок».

Я до этого не обращала внимания что там нового у яндекса, а оказалось новый формат разметки они уже с ноября прошлого (2011) года поддерживают. А ввели его Google, Microsoft и Yahoo аж в июне. Что ж, обычные микроформаты сказала я, глянув один раз на пример. Глянув на пример второй раз я заметила что микроформаты как раз необычные. И более того, используют кажущуюся невалидной с точки зрения html разметку. Об этом я и хочу сегодня рассказать, надеюсь статья будет интересной.

Сегодня, мой друг и коллега Cavin прислал мне ссылку на статью с хабра — «Браузеры запутались в блочной модели для таблиц». Я считаю, что эта статья в полной степени показывает мои мысли о том, что в россии специалистов любого профиля очень мало.

Некий царь призвал трёх мудрецов и попросил объяснить следующий факт:
«почему, если в кувшин, доверху наполненный водой, опустить рыбу, вода не выливается».
Двое мудрецов представили подробнейшее обоснование. Третий опустил в кувшин рыбу. И вода вылилась.

С наступающим, дорогие друзья!
Я так и не нашла силы побороть лень и дописать таки статью о вариантах комментариях, которую пишу уже месяца четыре. Думаю ничего страшного если она полежит у меня в запасниках ещё немного.

Сегодня я зашла таки, на рекламированный Вадимом Макеевым портал Web-Standards.ru. И, на удивление обнаружила там перевод заметки «Why we don’t have a parent selector» Джонатана Снука, написанная, что символично, 10 октября прошлого года (10.10.10). Собственно вот ссылка на сам перевод — «Почему у нас нет селектора по родителю» 20.09.11.

Сама статья бесспорно хорошая, в ней говорится вообще о том как писать быстрый код, почему селектор потомков медленный, почему селектор родителя был бы ещё медленнее, однако не говорится почему собственно есть хоть одна причина такой селектор не сделать. Да, это будет медленно. Да, всем понятно что селектор по id самый быстрый. Но в любом случае мы говорим о миллисекундах машинного времени. Обычно этим можно принебречь если сайт нагружен картинками и потоковым видео.

Собственно я бы не стала об этом писать если бы не прочитала ещё в сентябре черновик селекторов четвёртого уровня. Т. е. то, что мы будем называть CSS4.
Ссылка: http://www.w3.org/TR/2011/WD-selectors4-20110929/#overview
В самом низу указан родительский селектор: $E > F , который выбирает элемент E, родитель элемента F.

Кроме селектора родителя, конечно добавилось много других новых, клёвых селекторов, которые отнимут у Джонатана Снука ещё лишние секунды жизни.

Заключение

Безусловно, в тех проектах, в которых важна скорость работы в браузере — нет места подобным селекторам. Пример: проект, который я сейчас разрабатываю, расчитан на использования только в современных браузерах полностью исключая IE6-8, и возможно IE9 из-за их низкой скорости работы с dom; и тем не менее, в оформлении используются только селекторы id и класса; в яваскриптовом коде большинство селекторов заменены с jquery на нативные и т. п.

Т. е. каждый разработчик обязан представлять себе где и сколько времени отнимает выполнение его кода (css, js, html). Но при этом инструменты для того чтобы сделать «быстро и сразу» должны быть. Например на главной странице моего блога, менее 400 элементов в DOM, использование тормозящего селектора в данном случае вообще не будет заметно.

Спасибо что читаете мой блог! =)

Сегодня мы прикрутили к блогу поиск. Сам модуль поиска в движке был, но он искал только в обычных страницах и каталоге, а по новостям не искал. Сейчас ищет - это здорово. Адрес http://usabili.ru/search/news/. Будем считать это подарком бложику на двухлетие.

А теперь собственно обещанная вам 23 февраля статья.

Сейчас я поведаю вам о технологии Opensearch, с которой я играюсь уже неделю. Эта технология позволяет для любого сайта содержащего поиск, интегрироваться в панель поиска браузера. Особенность также в том, что поиск можно не только интегрировать как саму форму, но и обозначить страницу с которой можно загружать поисковые подсказки (suggestions). Например в Firefox это выглядит так:

Здравствуйте дорогие читатели моего бложика, надеюсь среди вас есть css-профессионалы, поскольку у меня есть любопытная задача. Я обнаружила следующую реализацию свойства opacity в современных браузерах:

http://usabili.ru/labs/css_opacity_bug.html — посмотрите эту страницу, на ней видно что у абсолютно позиционированного элемента внутри с прозрачностью, не работает z-index относительно другого элемента с прозрачностью. Т. е. он оказывается под ним, и соответственно красная ссылка в нём не доступна для клика. Красная ссылка в этом примере обрабатывается так как будто имеет z-index:0 или даже меньше, хотя это не так. Причём, при убирании свойства opacity у любого из элементов, или при перемещении элемента со ссылкой из прозрачного — ссылка становится рабочей.
Всё что говорится по этому поводу в спецификации css3: «If an element with opacity less than 1 is positioned, the ‘z-index’ property applies as described in [CSS21], except that ‘auto’ is treated as ‘0’ since a new stacking context is always created. See section 9.9 and Appendix E of [CSS21] for more information on stacking contexts». В упомянутых выше ссылках я не смогла найти точного ответа. Чтобы разобраться я отправила письма Яну Хигсону (hixie), который рекомендовал задать вопрос в лист рассылки www-style@w3.org, и Дэвиду Арону (dbaron), который ответил в топике багзиллы.

Ниже я публикую ответ этой загадки (пока в непереведённом виде):

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

В частности, полезным может оказаться один способ избавиться от дублированного контента в поисковой выдаче. Не секрет, что часто одна и та же страница оказывается проиндексирована под разными url, для того чтобы этого избежать можно использовать тег link, с атрибутом rel="canonical". Использование rel="canonical" — является более удобной альтернативой редиректам, с точки зрения поисковой оптимизации, к сожалению яндекс пока не поддерживает этот тег, но надеюсь будет понимать в скором будущем. Располагать его следует вместе с остальными в <head>, например примерно такой результат вы можете видеть если посмотрите в код текущей страницы:

<link rel="canonical" href="http://usabili.ru/news/2010/06/01/canonical_url.html">

Замечу, что курсивом в примере я выделила канонический урл этой страницы. Каноническим, называют url не какого-то чёткого вида, а того вида который вебмастер установил сам для себя. Важно придерживаться выбранному стилю во всём сайте. В этой статье я хочу вкратце рассказать какой канонический урл предпочитаю я, какой принят у нас в студии, и почему.

Восьмого апреля компании Мозилла, Опера и Майкрософт подали на рассмотрение в W3C спецификацию формата файла "WOFF File Format 1.0". Заявка была опубликована 19 апреля http://www.w3.org/Submission/2010/03/.

Производители браузеров и растущее количество производителей шрифтов договорились на общий формат веб-шрифтов, который завершит эру кроссбраузерной несовместимости, начавшуюся когда IE4 и Netscape 4 впервые добавили поддержку загружаемых шрифтов в 1997.

В то время, и Microsoft и Netscape разработали несовместимые друг с другом решения. Netscape поддерживал, (и в последствии отказался) формат Bitstream’s Portable Font Resource (PFR).  Интернет эксплорер использовал формат Embedded Open Type (EOT).

Десять лет спустя, Apple добавила в WebKit и Safari возможность подключения сырых шрифтов, т.е. TrueType или OpenType. Firefox и Opera последовали примеру, но использование было на практике ограничено бесплатными шрифтами и специальными сервисами обфускации типа Typekit, так как производители шрифтов категорически против того, чтобы позволять их интеллектуальная собственность была размещена "как есть" на страницах. Обычно большой размер файлов и различия связанные с поддержкой HTTP компрессии у разных пользователей добавили практических проблем.

В марте 2008, Microsoft подала заявку на стандартизацию EOT в W3C. Несмотря на большое количество существующих установленных EOT-совместимых IE, большое количество разногласий помешали формату Microsoft стать стандартом шрифта для веба.

Летом прошлого года, усилиями дизайнеров Тала Леминга (Tal Leming) и Эрика ван Блокланда (Erik van Blokland), и представителя Мозиллы Джонатана Кью (Jonathan Kew),  появился WOFF - открытый формат сетевого шрифта, уже содержащий в себе компрессию. Если сравнивать формат с обычным сжатым в gzip форматом TTF или OTF, новый формат не сильно отличается, однако я думаю, что изначально сжатый формат будет очень полезен тем, кто ещё не научился настраивать gzip на сайте.

Спецификация нового формата подготавливалась недавно созданной Fonts Working Group в которую вошли разработчики браузеров, компании-разработчики шрифтов и дизайнеры. 

Напомню что начиная с версии 3.6 файрфокс понимает этот формат, и рекомендует его для использования. В опере и эксплорере данная поддержка появится в будущих версиях.

Также файл может содержать в себе метаданные в формате XML, полезные чтобы получше узнать что это за шрифт и откуда.

Пример использования:

@font-face {font-family: 'PT Sans'; 
        src: url('pts55f.eot'); 
        src: local('PT Sans'), url('pts55f.woff') format('woff'), url('pts55f.ttf') format('truetype');}

 h2.style1 {font-size: 48px; line-height:normal; font-family: 'PT Sans'; font-weight: bold; font-style:italic;}

Целый месяц не писала, но сегодня спешу вас порадовать товарищи, т.к. знакомый многим Эрик Мейэр (http://meyerweb.com/eric/), редактор CSS3, добавил в спецификацию CSS3, предложенные специалистами (IE-team) из майкрософт, новые атрибуты. Эти атрибуты уже долгое время используются в браузере Internet Explorer, сами разработчики рассматривают их как дополнение к CSS2.1. Вот краткий список этих атрибутов по группам.

Визуальные эффекты

• overflow-x (-ms-overflow-x)
• overflow-y (-ms-overflow-y)

Цвета и бекграунды

• background-position-x (-ms-background-position-x)
• background-position-y (-ms-background-position-y)

Текст

• layout-flow (-ms-layout-flow)
• layout-grid (-ms-layout-grid)
• layout-grid-char (-ms-layout-grid-char)
• layout-grid-line (-ms-layout-grid-line)
• layout-grid-mode (-ms-layout-grid-mode)
• layout-grid-type (-ms-layout-grid-type)
• text-underline-position (-ms-text-underline-position)

Пользовательский интерфейс

• accelerator (-ms-accelerator)
• -ms-interpolation-mode (надо сказать, что в других браузерах этот атрибут всегда принимает значение bicubic, равно как и в блоках со значением zoom: 100%;)
• scrollbar-3dlight-color (-ms-scrollbar-3dlight-color)
• scrollbar-arrow-color (-ms-scrollbar-arrow-color)
• scrollbar-base-color (-ms-scrollbar-base-color)
• scrollbar-darkshadow-color (-ms-scrollbar-darkshadow-color)
• scrollbar-face-color (-ms-scrollbar-face-color)
• scrollbar-highlight-color (-ms-scrollbar-highlight-color)
• scrollbar-shadow-color (-ms-scrollbar-shadow-color)
• scrollbar-track-color (-ms-scrollbar-track-color)
• zoom (-ms-zoom)

Значения в скобках используются только в IE8.

Сообщество mozilla уже запланировало их поддержку в Firefox 4. Поддержки их в Webkit и Opera пока не ожидается.

Полный список изменений в спецификации вы можете узнать в этом документе от 25 марта:

http://download.microsoft.com/download/8/4/2/8427CF1B-08B3-4557-952D-102E7A8FA64C/%5BMS-CSS21E%5D.pdf

Сегодня, дабы провести экскурс среди коллег я бы хотела рассказать о том для чего нужен SSL, как он работает и какие типы SSL-сертификатов бывают.

Для чего нужен SSL

Итак, ни для кого не секрет что существуют злые, хитрые хакеры которые могут перехватить траффик вашего компьютера. От компьютера до веб-сервера траффик проходит через множество узлов многие из которых могут оказаться незащищёнными к "прослушке". В результате если вы предоставляете какому-то сайту личную информацию, от девичьей фамилии мужа или секретного рецепта пиццы, до мелочей вроде кредитной карты, то эта информация может попасть в третьи руки. Для того чтобы этого избежать информация шифруется, и такое соединение называется "безопасным" (secure - последняя буква в https://).