Сегодня, мой друг и коллега Cavin прислал мне ссылку на статью с хабра — «Браузеры запутались в блочной модели для таблиц». Я считаю, что эта статья в полной степени показывает мои мысли о том, что в россии специалистов любого профиля очень мало.
Родительский селектор в CSS 4
Некий царь призвал трёх мудрецов и попросил объяснить следующий факт:
«почему, если в кувшин, доверху наполненный водой, опустить рыбу, вода не выливается».
Двое мудрецов представили подробнейшее обоснование. Третий опустил в кувшин рыбу. И вода вылилась.
С наступающим, дорогие друзья!
Я так и не нашла силы побороть лень и дописать таки статью о вариантах комментариях, которую пишу уже месяца четыре. Думаю ничего страшного если она полежит у меня в запасниках ещё немного.Сегодня я зашла таки, на рекламированный Вадимом Макеевым портал
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, использование тормозящего селектора в данном случае вообще не будет заметно.Спасибо что читаете мой блог! =)
Особенность свойства opacity в CSS
Здравствуйте дорогие читатели моего бложика, надеюсь среди вас есть
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), который ответил в топике багзиллы.Ниже я публикую ответ этой загадки (пока в непереведённом виде):
Используйте border-radius
Вы любите скруглённые уголки? Я например — очень люблю. Практически в каждом дизайне или вёрстке у меня они присутствуют. Несколько лет назад — было бы проще нарезать дизайн в картинки и выложить их как есть, или же использовать метод c
css-спрайтами .Но сегодня я хочу рассказать пару новостей о свойстве
border-radius , которое раньше служило хорошим способом «постепенного улучшения»:Во-первых , хоть это и старая новость, Опера полностью поддерживает это свойство с версии 10.5 (т. е. уже полгода как). Грядущий IE9 также его поддерживает.Вторая новость, подсмотренная на хабре, заключается в том что файрфокс видимо уберёт наконец префикс -moz- у этого свойства в следующем релизе. Что очень радует, так как для файрфокса свойство приходилось писать отдельно, что очень лениво. Так что ждём webkit, когда он тоже отменит свой префикс, поскольку для него я часто даже не задавала отдельного свойства.
Что касается предыдущих версий IE, то в них поддержка включается специальным скриптиком
behavior: url(ie-css3.htc);
Который можно взять тут http://fetchak.com/
ie-css3 /, замечу что это финальная версия популярного скрипта, разные версии которого часто используются в других способах скругления уголков.Используйте
border-radius — красиво же! =)Проприетарные CSS-свойства от майкрософт включены в спецификацию СSS3
Целый месяц не писала, но сегодня спешу вас порадовать товарищи, т.к. знакомый многим Эрик Мейэр (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 марта:
Align средствами css и атрибутами html
Извиняюсь, за долгое отсутствие статеек, то праздники, то работа...
В общем сегодня я быстренько распишу подробнее свой комментарий на статью о вертикальном выравнивании. А именно как заменить атрибуты align и valign у html, средствами css.
Введение
Сперва, должна сказать, что эффект как атрибута, так и стилей, у блочных и строчных элементов отличается. В частности если задать выравнивание блочному элементу, то это повлияет на расположение дочерних элементов в нём, а если задать строчному, то вертикальное выравнивание повлияет на расположение его самого, а горизонтальное вообще ни на что не повлияет.
Для блочных элементов атрибут 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" - расположит все дочерние элементы справа, даже блочные.Таблица перевода атрибутов в CSS:
<div align="center"><b>/*Строчный элемент*/ <div style="text-align:center"><b> <div align="center"><table> /*блочный элемент*/ <table style="margin: 0 auto;"> <img align="right">/*inline-block элемент*/ <img style="float: 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 (cssvertical-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.
Напоследок давайте посмотрим как будет вести себя маленькая пиктограммка в вашем тексте с различным значением выравнивания:
Это можно также увидеть в html-примере.
Меняем цвета Input в Google Chrome
Поскольку в процессе вёрстки я проверяю результат во всех браузерах, я не могла не заметить что в Chrome (и др. Webkit) очень некрасиво ведут себя поля ввода. Во-первых, у них появляется очень некрасивая обводка при клике на них. Во-вторых, для сохранённых данных Хром подсвечивает форму ввода мерзким жёлтым цветом, при этом в случае заданного белого цвета шрифта всё совсем не читабельно (см. картинку ниже). Как это исправить?
Хром и Сафари - понимают селектор *:focus. Именно он отвечает за поведение того как себя ведёт поле ввода при фокусе. Для этого необходимо установить ему значение
*:focus {outline: none;}
И поля при клике на них не будут подсвечиваться рамкой.
Далее, баг с подсветкой сохранённых полей ввода в webkit известен уже давно и был сообщён разработчикам Chrome полтора года назад. Те его закрыли с резолюцией WontFix. Это, дескать, нарушает привычное пользователю поведение (behavior) браузера.
В самом движке webkit жёстко забит следующий CSS:
input:-webkit-autofill { background-color: #FAFFBD !important; background-image:none !important; }
Что не позволяет изменить его цвет средствами CSS. Улучшение было найдено одним из участников, необходимо в начале файла стилей добавить
input:-webkit-autofill { color: #2a2a2a !important; }
Это позволит хрому заменить ещё и цвет для автозаполненных полей, принудительно на чёрный.
Заключение: два этих фикса позволят приблизиться к поведению других браузеров и улучшить читабельность в случае светлых цветов шрифтов.
30 советов о CSS для начинающих
Эту статью я перевела с net.tutsplus.com, что заняло у меня почти неделю. Мне очень понравились замечания редактора, поэтому перевожу с ними. Они будут отмечены в тексте так: <editors-note></editors-note>
Мои замечания будут отмечены как: <прим. Елены>
Предыдущие записи, смотрите в архиве новостей »