Border-radius in Safari
В Safari столкнулся с неаккуратным рендерингом элемента, если ему задан border-radius и фоновый цвет. Увидеть проблему и её решение можно на тестовой странице.
Решение
1. Фоновый цвет у блока убрать
2. Внутрь блока добавить обертку
3. Обертке задать фоновый цвет
4. Обёртке задать border-radius, меньше на толщину бордера, чем у внешнего блока
<div class="button"><div class="button-inner">Кнопка</div></div>
.button
{
border: 5px solid #000;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-khtml-border-radius: 30px;
}
.button-inner
{
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-khtml-border-radius: 25px;
background: #fff;
}Update
Между фоном и бордером появляются дырки, если border-radius у обоих блоков одинаковый и:
1. Внутреннему блоку задана большая высота (height)
2. Его содержимое имеет большой font-size
3. Его содержимое представлено многострочным текстовым узлом
Внутреннему блоку нужно задавать border-radius с меньшим значением, чем у внешнего блока, потому что при border-radius:30px внешняя сторона бордера (толщина которого равна 5px) скруглена с радиусом 30px, а внутренняя сторона скруглена с радиусом 25px, меньше на толщину бордера.
Спасибо Александру Ермолаеву за багрепорт, а Степану Резникову за допиливание решения и объяснение про кривизну бордера.
Opera Mobile vs Mini
Талидомид
Это сообщение — фрагмент, который я не включил в презентацию «Ошибка. Осознание, примирение, извлечение пользы». К тому же в Минске на WSD’09 я пообещал письменно раскрыть свои соображения на тему «Какова ценность наших ошибок для наших пользователей». Обещание выполняю.
В ежедневной работе я имею дело с задачами с типом «ошибка», и у каждой ошибки есть важность — «minor», «major», «critical», «blocker». Работая в этой отрасли долго и каждый день сталкиваясь с критикалами и мажорами, возникает иллюзия, что я занимаюсь делом крайне важным и ответственным.
Вот только так ли это? Сильно ли я ошибусь, если скажу, что работа HTML-верстальщика — это сфера обслуживания — я создаю сайты, на которых люди могут что-то найти, что-то купить или что-то продать — услугу, товар или информацию. Если это так, что произойдет, если моя ошибка в вёрстке приведет к тому, что пользователю станет неудобно получать информацию или неудобно что-то покупать или что-то продавать? Любой руководитель скажет, что это серьезная ошибка, и на её исправление кидаются силы даже в выходные дни и среди ночи.
Всё логично, но только в эту важность я больше не верю. То есть верю, но не в то, что это делается ради удобства пользователей. Я уверен, что нет такой ошибки в моей работе, которая бы не потерпела до утра, пока я не приду на работу. Потому что все ошибки вёрстки, по большому счету, такая ерунда. Потому что…
Потому что талидомид.
Оскар и Розовая Дама
Невероятно, немыслимо, невозможно!
Искренно, трогательно и пронзительно сыграла Алиса Фрейндлих в моноспектакле «Оскар и Розовая Дама» по пьесе Эрика-Эммануэля Шмитта. Читать дальше…
Пётр Мамонов: «У любви есть один глагол — отдавать»
По поводу премьеры фильма «Царь» Пётр Мамонов дал интервью газете «Труд»
Читать дальше…
Болезнь
Сколько раз я соблазнял коллег, которые выходили на работу в болезненном состоянии: «Ходи домой, только представь, что тебя там ожидает — тусклый зашторенный свет, убаюкивающие объятия дивана, тихо урчащий на коленях ноутбук поверх старого, но любимого пледа в крупную клетку, аромат мёда дымком над чашкой темного стекла, а в ней в янтарно-лимонном напитке тихо позвякивает ложка, когда ты, боясь обжечься, едва касаешься губами гладкого края.»
Сегодня болею я. И только сейчас внезапно осознал, что ощущения от болезни не позволяют в полной мере наслаждаться домашним уютом. Как жаль. Пойду-ка, поплотнее завернусь в плед 
Лучше б молчали
В мультфильме «Бемби» есть обаятельный персонаж — заяц Топотун. Он несдержан и импульсивен, из-за чего порой говорит некорректности. Но при этом он искренен и неэгоистичен, что добавляет ему шарма. Папа-заяц учил его простому правилу: «Если не можешь сказать что-то хорошее, лучше промолчи». То, что Топотун не научился этому правилу следовать, это не страшно — он же глупый зайчишка. Но как много людей вокруг не научились этому. Им интереснее перенять мерзкие манеры Грегори Хауса, чем брать пример с добрых сказочных персонажей?
Лучше б молчали, ейбо.
Позиция
Прекрасный образец отстаивания своей позиции.
Браво!
Я задаю конкретные вопросы, которые у меня возникли.
Вы ни на один из них не дали ответа, но настойчиво пытаетесь мне объяснить, что я не имею права интересоваться.Я Вашу точку зрения понял, спасибо.
Вопросы, тем не менее, у меня остались.
Источник: http://dolboeb.livejournal.com/1640818.html?thread=78492530#t78492530
Сергей Чикуенок. Zen Coding v0.5
Это просто волшебство. Еще в начале зимы это был невероятный концепт от Вадима Макеева – прекрасная, и как мне казалось, трудно реализуемая идея. Основная идея – написание HTML с использованием CSS-like selectors. А сейчас это уже отлаженная реализация, которая потрясает своими возможностями.
Например, для меня неожиданностью стали такие возможности (в скобках время описания этой фичи в видеоролике):
- создание элементов с упорядоченным именованием [0:40]
- встраивание в CSS-like selector любых заранее созданных снипетов (в IntelliJIDEA это называется LiveTemplates) [1:18]
- оборачивание фрагмента кода с синтаксисом Zen Coding (не просто обернуть тегом
div, а, например, обернуть фрагментом кодаdiv#wpar>div#wrap-innerи даже больше – надстройка новых узлов, предшествующих не только обертываемому блоку, а любому его родителюdiv#header+div#page>div#wpar>div#wrap-inner— крутизна!) [2:15] - оборачивание каждой строки выделенного фрагмента однотипными элементами, прям как в MS Word, при этом используются возможности предыдущего пункта – вообще крутизна! [3:33]
- возможность использовать не только вызов статических снипетов, как в пункте 2, а применять к ним операторы множения и создания родственных осей [4:21]
- возможность в этих снипетах кастомизировать имена CSS-классов и ID, как и в обычных элементах [5:24]
Вадиму Макееву и Сергею Чикуенку выражаю свой восторг идеей и отменной реализацией. Парни, вы молодцы!
PS Если я неправильно просклонял фамилию Сергея, прошу простить и подсказать, как правильно — я исправлю
IE и rgba
Вслед за Женей, учусь новому.
http://bolknote.ru/2009/11/01/~2299
Женя удивился, а вслед за ним, удивился и я. Сколько лет назад командой разработки MSIE были придуманы разные клевые штуки, облегчающие разработку. И многие из них всё еще не предложены нам от W3C.
Сегодня, благодаря этому новому знанию, я понял как решить две труднорешаемые задачи. Издавна, чтобы сделать фон блока полупрозрачным, мы вынуждены были использовать или png-24 картинку в фоне или opacity-свойство. Но в случае с png-24, для ИЕ6 нужно писать AlphaImageLoader фильтр, который катастрофически замедляет рендеринг страницы. А в случае с opacity приходилось придумывать трюки, чтобы дети блока не бледнели от родительского opacity.
А теперь проблему opacity можно забыть, как страшный сон:
.block
{
background: #rgba
}
* html .block
{
filter:progid:DXImageTransform.Microsoft.gradient (startColorstr=#99000000, endColorstr=#99000000);
}В начальной и конечной позиции один и тот же RGB (000000) и добавляю перед ним одно и то же значение Alpha (99)
Значение Alpha указывается в 16-тиричной системе, где 00 – полностью прозрачный, а ff – непрозрачный пиксел
Я протестировал скорость рендеринга страницы, на которой выливается 300 элементов с gradient-фильтром — он не замедляет рендеринг и это сильно радует
Но этот случай описывает ситуацию, когда нужно сделать однотонный полупрозрачный цвет, как например в модальных диалогах, когда вся остальная страница затемняется.
Иногда использовать png-24 всё-таки необходимо, как например в случае, когда нужно обрезать длинную неразрывную строку, уводя ее градиентом в непрозрачность.
В этом случае можно использовать второй способ.
.block
{
background: url(image.png)
}
* html .block
{
filter:progid:DXImageTransform.Microsoft.gradient (startColorstr=#00ffffff, endColorstr=#ffffffff, GradientType=1);
}GradientType принимает значение 1, если градиент рисуется слева-направо; и 0, если градиент сверху-вниз.
MSIE хороший браузер.
Дальше »