Неделю назад, мой друг и коллега Джелу спросил меня, как я отношусь к разметке Schema.org и правильно ли в целях продвижения использовать разметку для картинок которую предлагает яндекс в разделе справки — «Schema.org для Яндекс. Картинок».
Я до этого не обращала внимания что там нового у яндекса, а оказалось новый формат разметки они уже с ноября прошлого (2011) года поддерживают. А ввели его Google, Microsoft и Yahoo аж в июне. Что ж, обычные микроформаты сказала я, глянув один раз на пример. Глянув на пример второй раз я заметила что микроформаты как раз необычные. И более того, используют кажущуюся невалидной с точки зрения html разметку. Об этом я и хочу сегодня рассказать, надеюсь статья будет интересной.
Сегодня, мой друг и коллега Cavin прислал мне ссылку на статью с хабра — «Браузеры запутались в блочной модели для таблиц». Я считаю, что эта статья в полной степени показывает мои мысли о том, что в россии специалистов любого профиля очень мало.
Некий царь призвал трёх мудрецов и попросил объяснить следующий факт:
«почему, если в кувшин, доверху наполненный водой, опустить рыбу, вода не выливается».
Двое мудрецов представили подробнейшее обоснование. Третий опустил в кувшин рыбу. И вода вылилась.
С наступающим, дорогие друзья!
Я так и не нашла силы побороть лень и дописать таки статью о вариантах комментариях, которую пишу уже месяца четыре. Думаю ничего страшного если она полежит у меня в запасниках ещё немного.
Сама статья бесспорно хорошая, в ней говорится вообще о том как писать быстрый код, почему селектор потомков медленный, почему селектор родителя был бы ещё медленнее, однако не говорится почему собственно есть хоть одна причина такой селектор не сделать. Да, это будет медленно. Да, всем понятно что селектор по 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, использование тормозящего селектора в данном случае вообще не будет заметно.
Здравствуйте дорогие читатели моего бложика, надеюсь среди вас есть 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>, например примерно такой результат вы можете видеть если посмотрите в код текущей страницы:
Замечу, что курсивом в примере я выделила канонический урл этой страницы. Каноническим, называют url не какого-то чёткого вида, а того вида который вебмастер установил сам для себя. Важно придерживаться выбранному стилю во всём сайте. В этой статье я хочу вкратце рассказать какой канонический урл предпочитаю я, какой принят у нас в студии, и почему.
Сперва, должна сказать, что эффект как атрибута, так и стилей, у блочных и строчных элементов отличается. В частности если задать выравнивание блочному элементу, то это повлияет на расположение дочерних элементов в нём, а если задать строчному, то вертикальное выравнивание повлияет на расположение его самого, а горизонтальное вообще ни на что не повлияет.
Для блочных элементов атрибут align - аналогичен стилю text-align, для строчных - атрибуту float. Атрибут valign (который можно писать как align, при отсутствии оного), заменяет свойство vertical-align, только с немного другими значениями, смотрите ниже таблицу соответствий.
Горизонтальное выравнивание
Раньше, например для того чтобы центрировать какой-то элемент, использовани элемент <center>, потом такой простой и понятный элемент запретили, в пользу <div align="center">, потом запретили и атрибут align, в пользу css свойств text-align, float и margin.
Важно помнить:
text-align - в правильных браузерах не влияет на дочерние блоковые элементы!
Т.е <div align="right"> и <div style="text-align:right"> не одно и тоже. Свойство text-align не окажет влияния на дочернюю таблицу или div, тогда как align="right" - расположит все дочерние элементы справа, даже блочные.
Когда vertical-align задан ячейке таблицы - это задаёт расположение базовой линии текста относительно ячейки.
<td valign="top"> и <td style="vertical-align:top"> - одно и то же.
Аналогично с inline элементами. Поиск в гугле показал что:
<img valign="absmiddle"> означает <img style="vertical-align:middle">
Правильно кстати писать не valign, а align, однако любимый эксплорер в каких-то версиях понимает для align только центровку по горизонтали. Возможно это сделано для того чтобы была возможность задавать отдельно align (css text-align) и отдельно valign (css vertical-align)
Интересно знать такую таблицу соответствий , например применительно к <img> (указываю атрибут align, но подразумеваю valign):
align="bottom"
vertical-align:baseline;
значение по умолчанию, выравнивает базовые линии текста и картинки
align="baseline"
vertical-align:baseline;
то же самое
align="absbottom"
vertical-align:bottom;
выравнивает базовую линию картинки по низу текста
align="absmiddle"
vertical-align:middle;
выравнивает середину текста с серединой картинки
align="MIDDLE"
не имеет аналога
выравнивает нижнюю границу текста с серединой картинки
align="top"
vertical-align:top;
выравнивает по высоте самого высокого текста
align="texttop"
vertical-align:text-top;
выравнивает по высоте шрифта элемента родителя.
P.S. Не забывайте, что элемент <p> - является блочным, т.е. для форматирования текста в нём достаточно применять style text-align.
Итак, долгожданная статья. Вопреки заголовку свойства display:float здесь не используется, что не отменяет результата.
Неделю назад мне потребовался эффект для создания плавающих блоков фиксированной ширины, примерно как на картинке:
Если вы пробовали верстать что-то похожее, то знаете в чём подвох.
В общем случае, сверстать этот макет было бы плёвым делом. Фиксированная ширина, фиксированная высота, float:left и готово. Но! Дизайн требует чтобы количество контента могло варьироваться, что означает — если в одном из блоков будет больше контента, то вёрстка поедет:
Так как первый блок выше чем другие, пятый блок, обтекает его слева, вместо того чтобы быть ниже. Я потратила немало времени в поисках нужной реализации, и в конце концов вспомнила про свойство display:inline-block, кроссбраузерную реализацию которого, как оказывается, я ровно год назад утянула себе в закладочки. Далее — перевод этой статьи.
Сегодня, в преддверии грядущей статьи, я хочу кратко рассказать о свойстве vertical-align в CSS, которое применяется для вертикального выравнивания. Предварительно рекомендую прочитать про базовую линию шрифта в википедии.
Итак, сначала рассмотрим строку текста, и как называются различные вертикальные позиции на ней.
На самом деле позиций которых может иметь своство vertical-align гораздо больше. Можно даже задать точное значения в пикселях или процентах. Главное что нужно помнить, это то что для всех inline-элементов в строке одна базовая линия (baseline).
Пример: сыр.
Также нужно помнить, что базовая линия является значением по-умолчанию для всех inline-элементов, включая элемент img. Поэтому если вы верстаете таблицу в стандартном режиме и в её ячейке вы поставите только картинку, то останется зазор между границей ячейки и границей картинки снизу, избавиться от него можно задав стиль картинки vertical-align:bottom, или стиль ячейки font-size:0px.
Напоследок давайте посмотрим как будет вести себя маленькая пиктограммка в вашем тексте с различным значением выравнивания:
Сейчас я покажу вам особую, скроллбарную магию. Шучу конечно, ибо о полосе прокрутке (скроллбаре) я хочу сказать совсем немного, и эта заметка будет небольшой. Статья посвящена прежде всего вертикальной полосе.
Некоторые дизайнеры, не любят делать резиновые дизайны, ссылаясь на то, что сделать фиксированный размер проще, и это действительно так. Мы привыкли называть резиновым — дизайн, который растягивается по высоте и ширине, потому что у всех разная ширина экрана и этот дизайн растягивается под любую из них. Однако, правильное растягивание по высоте — тоже является проблемой. Поэтому самый простой дизайн — дизайн не растягивающийся ни по ширине, ни по высоте. Но как же быть с контентом? Ведь количество контента на странице нельзя сделать фиксированным и он всё равно начнёт вылезать вниз?
Когда меня спрашивают как сделать чтобы контент страницы не вылазил за пределы блока, а например скроллировался, я указываю на свойство
overflow:auto;
Теперь расскажу чем это чревато для пользователя:
Во-первых, пользователь не привык что полоса прокрутки контента страницы будет в другом месте. Смотри статью «Привычки пользователя».
Во-вторых, в полосу у границы экрана гораздо легче попасть. Смотри статью «О границах экрана».
В-третьих, на скроллируемом участке, по-умолчанию не работает колёсико мыши или клавиатурная навигация, только при переходе в заданную область.
На небольшом разрешении, например мобильного браузера, у вас могут появится несколько скроллбаров, что запутает пользователя.
Этих причин — хватает, чтобы отказаться от идеи использовании скроллбара, в месте для него не предназначенном. Сделать дизайн растягивающимся по высоте можно (и нужно) в 99.9% случаев.
Для всех кто по каким-либо причинам не может войти в мой блог через OpenID в блоге теперь открыта регистрация. Вы можете выбрать ФИО (он же ник), Email и URL, остальные поля не используются в комментариях.
В скором времени станет возможным объединение обычных и openid аккаунтов.
