Markdown блог

«У каждого есть талант, но лишь немногие обладают смелостью шагнуть за ним в тот мрак, в который он ведет». Эрика Джонг.

Одного кадра достаточно, чтобы захотеть посмотреть фильм целиком.

В 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, меньше на толщину бордера.

Спасибо Александру Ермолаеву за багрепорт, а Степану Резникову за допиливание решения и объяснение про кривизну бордера.

Невероятно, немыслимо, невозможно!

Искренно, трогательно и пронзительно сыграла Алиса Фрейндлих в моноспектакле "Оскар и Розовая Дама" по пьесе Эрика-Эммануэля Шмитта.

Сколько раз я соблазнял коллег, которые выходили на работу в болезненном состоянии: "Ходи домой, только представь, что тебя там ожидает — тусклый зашторенный свет, убаюкивающие объятия дивана, тихо урчащий на коленях ноутбук поверх старого, но любимого пледа в крупную клетку, аромат мёда дымком над чашкой темного стекла, а в ней в янтарно-лимонном напитке тихо позвякивает ложка, когда ты, боясь обжечься, едва касаешься губами гладкого края."

Сегодня болею я. И только сейчас внезапно осознал, что ощущения от болезни не позволяют в полной мере наслаждаться домашним уютом. Как жаль. Пойду-ка, поплотнее завернусь в плед :)

Вслед за Женей, учусь новому. 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 хороший браузер.

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

http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/ Оказывается, не всё гладко:

• Моргание текста

• Задержка отображения всей страницы в ИЕ

• Для загрузки шрифта не увеличивается количество параллельных загрузок с одного домена (неудивительно, но нужно помнить)

• Индикация загрузки документа, пока не загрузится шрифт

И рекомендации от Стива (вольный пересказ):

• Используйте @font-face только тогда, когда вы совершенно уверены, что он вам нужен.

• Если вы используете несколько файлов шрифтов, запрашивайте их с разных доменов

• Избегайте неиспользуемых правил @font-face — IE всё равно будет их загружать, несмотря на то, что они не применяются ни к одному элементу

• Используйте gzip-сжатие файлов шрифтов и передавайте с заголовком Expires, выставленным надолго.

• Используйте постзагрузку файлов шрифтов, по крайней мере в IE.

Замечательный фильм — 16 минут удовольствия

YoYurec, спасибо за ссылку :)