{
    "version": "https:\/\/jsonfeed.org\/version\/1.1",
    "title": "Блог Ильи Бирмана: заметки с тегом ЦСС",
    "_rss_description": "Блог Ильи Бирмана о дизайне, городах, музыке и жизни.",
    "_rss_language": "ru",
    "_itunes_email": "ilyabirman@ilyabirman.ru",
    "_itunes_categories_xml": "<itunes:category text=\"Arts\"><itunes:category text=\"Design\" \/><\/itunes:category>\r\n<itunes:category text=\"Society &amp; Culture\"><itunes:category text=\"Personal Journals\" \/><\/itunes:category>\r\n<itunes:category text=\"Technology\" \/>\r\n",
    "_itunes_image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic-square@2x.jpg?1573933764",
    "_itunes_explicit": "no",
    "home_page_url": "https:\/\/ilyabirman.ru\/meanwhile\/tags\/css\/",
    "feed_url": "https:\/\/ilyabirman.ru\/meanwhile\/tags\/css\/json\/",
    "icon": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764",
    "authors": [
        {
            "name": "Илья Бирман",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/",
            "avatar": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764"
        }
    ],
    "items": [
        {
            "id": "2593",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/2010\/03\/15\/2\/",
            "title": "Абсолютно относительно",
            "content_html": "<p>В ЦССе постоянно приходится делать абсолютно позиционированные элементы внутри относительно позиционированных, чтобы «привязаться» к какой-то плавающей точке в нормал-флоу. Это тупизм, потому что это вынуждает в разметке добавлять лишние элементы. Например, нам надо пририсовать к слову значок суффикса, который у нас есть в виде гифовой картинки. Вот что хочется писать в разметке:<\/p>\n<pre class=\"e2-text-code\"><code>слов&lt;img class=&quot;suffix&quot; src=&quot;i\/suffix.gif&quot; \/&gt;ечко<\/code><\/pre><p>Но что написать в стилях?<\/p>\n<pre class=\"e2-text-code\"><code>.suffix {\n  position: ???\n  width: 1.5em; \/* на три буквы чтоб *\/\n  bottom: -1em;\n}<\/code><\/pre><p>Относительно позиционированный элемент занимает собой места в нормал-флоу столько же, сколько непозиционированный, а потом может быть сдвинут относительно этого места так, что нормал-флоу этого не заметит. В нашем случае это не подходит, потому что будет разрыв между «слов» и «ечко» шириной в картинку.<\/p>\n<p>Абсолютно позиционированный элемент не участвует в нормал-флоу и позиционируется относительно ближайшего позиционированного предка, либо относительно границ браузера, если позиционированных предков нет. Это нам тоже не подходит, так как нам надо, чтобы позиционировалась картинка именно относительно той точки в слове, куда мы её поставили.<\/p>\n<p>Поэтому всё время приходится делать так:<\/p>\n<pre class=\"e2-text-code\"><code>слов&lt;span class=&quot;suffix&quot;&gt;&lt;img src=&quot;i\/suffix.gif&quot; \/&gt;&lt;\/span&gt;ечко<\/code><\/pre><pre class=\"e2-text-code\"><code>.suffix { position: relative }\n.suffix img {\n  position: absolute;\n  width: 1em;\n  bottom: -1em;\n}<\/code><\/pre><p>Спан, конечно, красивее было бы закрыть после «ечк», но это не про семантику заметка. Так вот, весь этот спан, получается, существует только для того, чтобы задать «систему координат» для картинки. Но ведь она уже задана тем, куда вы воткнули эту картинку в разметке!<\/p>\n<p>Так почему было не придумать какой-нибудь position: anchored, который бы участвовал в нормал-флоу, но с точки зрения нормал-флоу имел бы размеры 0 на 0? Можно было бы развить идею, введя anchored-x и anchored-y, чтобы, допустим, сделать сноски на поля, висящие на уровне того места, откуда на них ссылаются. Атрибут position: anchored-y означал бы, что left \/ right для этого элемента имеют смысл по принципу position: absolute; а top \/ bottom — по принципу position: anchored, т. е. относительно точки, где элемент встретился в разметке. Тогда текст, снесённый на поля, можно было бы размечать так:<\/p>\n<pre class=\"e2-text-code\"><code>Пушкин писал&lt;sup&gt;1&lt;\/sup&gt;&lt;div class=&quot;sidenote&quot;&gt;&lt;sup&gt;1&lt;\/sup&gt; В «Капитанской дочке»&lt;\/div&gt;: «Береги честь смолоду».<\/code><\/pre><pre class=\"e2-text-code\"><code>.sidenote {\n  position: anchored-y;\n  left: 110%; \/* чтобы отступить от самого текста 10% его ширины *\/\n  top: 0;\n}<\/code><\/pre><p>Почему создатели стандартов придумывают всякую хрень (вроде box-shadow или анимации) раньше, чем решают базовые задачи вёрстки?<\/p>\n<p><i>Добавлено несколько позже:<\/i> Оказывается, я ничего не понимаю в вёрстке. Спасибо комментаторам за прояснение ситуации.<\/p>\n",
            "summary": "В ЦССе постоянно приходится делать абсолютно позиционированные элементы внутри относительно позиционированных, чтобы «привязаться» к какой-то плавающей точке в нормал-флоу",
            "date_published": "2010-03-15T12:57:51+02:00",
            "date_modified": "2021-06-16T09:48:47+02:00",
            "tags": [
                "веб-разработка",
                "вёрстка",
                "ЦСС"
            ],
            "_date_published_rfc2822": "Mon, 15 Mar 2010 12:57:51 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "2593",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "highlight\/highlight.js",
                    "highlight\/highlight.css"
                ],
                "og_images": []
            }
        },
        {
            "id": "1819",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/2007\/04\/27\/1\/",
            "title": "Верхние и нижние индексы, не портящие вид текста",
            "content_html": "<p>Для нижних и верхних индексов в ХТМЛе есть элементы <tt>sub<\/tt> и <tt>sup<\/tt>. К сожалению, при использовании их в тексте равенство высот строк ломается, и образуются неприятные дыры:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/supsub-1.gif\" width=\"507\" height=\"227\" alt=\"Верхние и нижние индексы, портящие высоту строки\" \/>\n<\/div>\n<p>Но ведь мы знаем, что элементы выглядят в браузере так, как выглядят, лишь потому, что про них написано что-то во встроенной таблице стилей браузера (иногда, правда, воображаемой).<\/p>\n<p>Элементы <tt>sub<\/tt> и <tt>sup<\/tt> для выравнивания используют свойство <tt>vertical-align<\/tt> со значениями <tt>sub<\/tt> или <tt>super<\/tt>. Именно они и влияют на высоту строки. Стало быть, нам нужно вместо них использовать какой-нибудь <tt>vertical-align<\/tt>, оставляющий строку прежней высоты, и сдвигать индексы иным способом, например, с помощью <tt>position: relative<\/tt>.<\/p>\n<p>Я уже давно почти везде использую примерно вот такую конструкцию:<\/p>\n<pre class=\"e2-text-code\"><code>sup, sub {\n  vertical-align: middle;\n  position: relative;\n  font-size: 75%;\n}\nsup { bottom: 0.5em; }\nsub { top: 0.5em; }<\/code><\/pre><p>В результате получается нормальный текст:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/supsub-2.gif\" width=\"507\" height=\"215\" alt=\"Верхние и нижние индексы, не портящие высоту строки\" \/>\n<\/div>\n",
            "summary": "Для нижних и верхних индексов в ХТМЛе есть элементы sub и sup. К сожалению, при использовании их в тексте равенство высот строк ломается, и образуются неприятные дыры",
            "date_published": "2007-04-26T23:50:23+02:00",
            "date_modified": "2021-07-31T09:39:32+02:00",
            "tags": [
                "веб-разработка",
                "типографика",
                "ХТМЛ",
                "ЦСС"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/supsub-1.gif",
            "_date_published_rfc2822": "Thu, 26 Apr 2007 23:50:23 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "1819",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [
                    "highlight\/highlight.js",
                    "highlight\/highlight.css"
                ],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/supsub-1.gif",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/supsub-2.gif"
                ]
            }
        },
        {
            "id": "1809",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/2007\/03\/27\/1\/",
            "title": "О фиксированном позиционировании в CSS",
            "content_html": "<p>Верстальщики недолюбливают компанию «Микрософт» за жуткую глючность и непоследовательность IE в разборе и отображении CSS. Но есть две вещи, которые компания «Микрософт» сделала правильнее, чем все остальные.<\/p>\n<ol start=\"1\">\n  <li>Компания «Микрософт» забила на идиотский стандарт, согласно которому шириной бокса является ширина его содержимого, а не ширина самого бокса, и предпочла использовать здравый смысл. Когда стандартизаторы поняли, какую ахинею они придумали, они добавили свойство box-sizing, и поэтому теперь мы имеем возможность верстать страницы нормально под всеми браузерами.<\/li>\n  <li>Компания «Микрософт» не реализовала поддержку идиотского значения атрибута position: fixed. Благодаря этому такого извращения нет почти ни на каких сайтах.<\/li>\n<\/ol>\n<p>В «Техногрете» появилась <a href=\"http:\/\/www.artlebedev.ru\/tools\/technogrette\/html\/fixed_in_msie\/\">статья Андрея Шитова<\/a>, где он рассказывает о способе заставить position: fixed работать в IE. Несколько раньше на <a href=\"http:\/\/napisal.ru\/\">сайте Ромы Воронежского<\/a> появился этот ужас «в действии».<\/p>\n<p>Это совершеннейший интерфейсный кошмар, заставляющий прокрутку в браузере работать не так, как она работает <i>во всех остальных приложениях в мире<\/i>. Когда менюшка расположена в верхней части экрана, тебе кажется, что ты находишься и в самой верхней точке прокрутки — но на самом деле можно крутить ещё и ещё. Часть страницы сверху уже «упёрлась» в край, а у части начало было явно где-то выше, потому, что строки торчат из-за верней границы. К этому невозможно привыкнуть, и это не укладывается в голове нормального человека — как теория об искривлённости пространства.<\/p>\n<p>Если очень-очень надо, чтобы крутилась только часть страницы, то скроллинг должен быть именно вокруг этой части. Это делается фреймами или дивом, у которого overflow: scroll. У всего этого есть ещё целая куча недостатков, про которые можно рассказывать часами (хотя бы то, что скролбар, не упёртый в правый угол, имеет маленькую ширину, и в него приходиться целиться).<\/p>\n<p>Давно известно, что техническая возможность что-либо сделать не может являться <i>поводом<\/i> это делать. Не нужно разукрашивать скролбар в разные цвета, не нужно делать бегущую строку тегом &lt;marquee&gt;, не нужно подвешивать менюшки с помощью position: fixed. Это «прикольно», но пользователя всё это бесит.<\/p>\n",
            "summary": "Верстальщики недолюбливают компанию «Микрософт» за жуткую глючность и непоследовательность IE в разборе и отображении CSS",
            "date_published": "2007-03-27T15:19:37+02:00",
            "date_modified": "2026-02-18T13:37:08+02:00",
            "tags": [
                "веб-дизайн",
                "ЦСС"
            ],
            "_date_published_rfc2822": "Tue, 27 Mar 2007 15:19:37 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "1809",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "1632",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/2006\/06\/04\/1\/",
            "title": "Маркированные списки",
            "content_html": "<p>Одной из претензий нормоконтролёра к моей пояснительной записке было использование маркированных списков с буллетами. Вот таких:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/list-bullets.jpg\" width=\"400\" height=\"300\" alt=\"Список маркированный буллетами\" \/>\n<\/div>\n<p>Нормоконтролёр называл буллеты кляксами и утверждал, что таких символов в русском языке не бывает. Я не очень-то ему верил, в чём честно признался. Как же не бывает, вон они, повсюду!<\/p>\n<p>В любом случае, мне было предложено избавиться от маркированных списков, заменив их нумерованными. Аргумент: в техническом документе должны быть возможность на любой «объект» сослаться по нормальному идентификатору, а не словами вроде «ну, там, где у вас ещё говорится о том-то». Нормоконтролёр сказал, что готов мне простить буллеты в списках из 2-3 элементов, но не в более длинных. Аргумент про возможность сослаться мне представился бесспорным.<\/p>\n<p>Придя домой, я заглянул в справочник и обнаружил там вот что:<\/p>\n<blockquote>\n<p>Знак тире (кружок, ромбик и т. п.) [рекомендуется употреблять в случае, если] перечень не требует запоминания его элементов в определённом порядке или элементы перечня относятся к самой низшей ступени, когда либо остальные техн. средства обозначения уже использованы, либо по значимости данный перечень относится к низшей ступени в сопоставлении с аналогичными элементами в других перечнях.<\/p>\n<p><i>Мильчин А. Э., Чельцова Л. К. Справочник издателя и автора. Редакционно-издательское оформление издания. — М: Олимп, 1998; стр. 39<\/i><\/p>\n<\/blockquote>\n<p>Это написано уже после того, как перечислено несколько способов нумерации, что косвенно подтверждает её предпочтительность. Также обратим внимание, что «кляксы» перечисляются в скобках, а основным символом называется знак тире. Я помню, что в школьных учебниках использовалось именно оно, но многие годы работы с Word и CSS отучили от этого символа совершенно. Попробовав заменить в Word’е в стиле «маркированный» буллет на тире, я обнаружил, что так действительно смотрится лучше:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/list-mdashes.jpg\" width=\"400\" height=\"300\" alt=\"Список маркированный тире\" \/>\n<\/div>\n<p>На вторую попытку прохождения нормоконтроля я пришёл довольным, а ушёл, оставив довольным и нормоконтролёра (по крайней мере, в этой части).<\/p>\n<p>Теперь захотелось посмотреть, как будут смотреться списки с тире на вебе. Но что же делать с CSS? В нём мне не удалось найти никакого способа использовать тире вместо буллетов. Даже в CSS 3. Возможно, я просто чего-то не увидел? Подскажите, кто разбирается (картинки не предлагать).<\/p>\n",
            "summary": "Одной из претензий нормоконтролёра к моей пояснительной записке было использование маркированных списков с буллетами",
            "date_published": "2006-06-04T11:36:46+02:00",
            "date_modified": "2021-09-01T18:49:24+02:00",
            "tags": [
                "русский язык",
                "типографика",
                "учёба",
                "ЦСС"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/list-bullets.jpg",
            "_date_published_rfc2822": "Sun, 04 Jun 2006 11:36:46 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "1632",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/list-bullets.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/list-mdashes.jpg"
                ]
            }
        },
        {
            "id": "1397",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/2005\/10\/03\/1\/",
            "title": "Border East Color",
            "content_html": "<p>Обнаружил, что оказывается свойства типа <tt>-moz-box-sizing<\/tt> соответствуют стандарту. В том смысле, что W3C резервируют синтаксис -id-blah-blah для расширений разных браузеров и даже перечисляет уже известные префиксы (-moz-, -o-, -atsc- и -wap-) прямо в <a href=\"http:\/\/www.w3.org\/TR\/CSS21\/syndata.html#q4\">спецификации<\/a>.<\/p>\n<p>Чувством юмора они тоже не обделены:<\/p>\n<blockquote>\n<p>For example, if XYZ organization added a property to describe the color of the border on the East side of the display, they might call it -xyz-border-east-color.<\/p>\n<\/blockquote>\n",
            "summary": "Обнаружил, что оказывается свойства типа -moz-box-sizing соответствуют стандарту. В том смысле, что W3C резервируют синтаксис -id-blah-blah для расширений разных браузеров и даже перечисляет уже известные",
            "date_published": "2005-10-02T23:24:41+02:00",
            "date_modified": "2021-09-09T12:01:24+02:00",
            "tags": [
                "смешное",
                "ссылки",
                "ЦСС"
            ],
            "_date_published_rfc2822": "Sun, 02 Oct 2005 23:24:41 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "1397",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "1058",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/2005\/01\/28\/3\/",
            "title": "Три маленьких открытия",
            "content_html": "<p>Так не бывает, чтобы сверстал сайт, а он — хоба-на — работает во всех браузерах отлично. Каждый раз приходится что-то подкручивать, подделывать. Но с другой стороны, благорадря этому узнаёшь всё больше разного. Сегодня я узнал три разного.<\/p>\n<h2>1. Как заставить IE нормально понимать z-index?<\/h2>\n<p>Есть такая проблема, что IE применяет z-index’ы не ко всему документу, а как-то выборочно. Например, относительно позиционированный элемент оказывается «ближе к пользователю», чем статический, даже если его z-index меньше. Создаётся впечатление, что каждый relative-элемент создаёт своё пространство z-индексов.<\/p>\n<p>Исследования показали, однако, что это ложное впечатление. На самом деле своё пространство z-индексов едино для всех относительных элементов. Таким образом, проблема решается просто путём изменения статического элемента на относительный. По идее, других проблем это вызвать не должно?<\/p>\n<h2>2. Как в Mozilla изобразить overflow-x\/overflow-y?<\/h2>\n<p>У меня тут ситуация такова, что на странице почти обязательно появляется горизонтальный скроллинг (по смыслу), но видимым он быть не должен. В IE эта проблема решается вот так:<\/p>\n<pre class=\"e2-text-code\"><code>overflow-x: hidden;<\/code><\/pre><p>Но на самом деле свойства overflow-x и overflow-y придумали в Microsoft, а W3C про них ничего не знают. Как же сделать это в Мозилле? А вот так:<\/p>\n<pre class=\"e2-text-code\"><code>overflow: -moz-scrollbars-vertical;<\/code><\/pre><p>Итого имеем:<\/p>\n<pre class=\"e2-text-code\"><code>body {\n  overflow: -moz-scrollbars-vertical;\n  overflow-x: hidden;\n}<\/code><\/pre><p>Осталось понять, как сделать то же самое в Опере.<\/p>\n<h2>3. Как в Opera изобразить overflow-x\/overflow-y?<\/h2>\n<p>А никак. То есть, <i>как<\/i>, но только совсем другим путём. Потыкавшись в Гуголь минуты полторы и не найдя готового решения (вроде -o-scrollbars-vertical), я решил, что нужно сочинять своё имеющимися средствами (то есть, средствами W3C). Но это оказалось просто.<\/p>\n<p>W3C <a href=\"http:\/\/www.w3.org\/TR\/CSS21\/visufx.html#propdef-overflow\">считает<\/a>, что свойство overflow может иметь значения visible, hidden, scroll, auto, inherit. То есть, применяя это всё к body, мы можем получить либо полное отсутствие скроллбара, либо присутствие обоих (понятно, что речь идёт о странице, которая не помещается в отведённые ей рамки). Но кто сказал, что применять его нужно к body? Итак, решение.<\/p>\n<p>Внутрь body запихиваем вот такой вот div:<\/p>\n<pre class=\"e2-text-code\"><code>#wrapper {\n  width: 100%;\n  height: auto;\n  overflow: hidden;\n}<\/code><\/pre><p>И весь остальной контент запихиваем уже в него. Теперь всё работает так, как нам надо. Элемент body отображает только вертикальный скроллбар; горизонтальный ему не нужен, так как единственный элемент, находящийся внутри него — #wrapper — имеет ширину 100%, то есть прекрасно влезает по ширине.<\/p>\n<p>В этом месте кажется, что можно выкинуть IE-only overflow-x и MZ-only -moz-scrollbars-vertical, дабы получить красивый, внятный и совместимый со стандартами CSS. Но не тут-то было. Mozilla всё-таки снова отображает горизонтальный скроллинг. Как же она его любит...<\/p>\n<p>В общем, для надёжности оставляем всё, и overflow-x, и -moz и wrapper. И чёрт с ними, со стандартами.<\/p>\n<p>Hope it helps™<\/p>\n",
            "summary": "Так не бывает, чтобы сверстал сайт, а он — хоба-на — работает во всех браузерах отлично. Каждый раз приходится что-то подкручивать, подделывать",
            "date_published": "2005-01-28T14:43:10+02:00",
            "date_modified": "2022-01-26T12:53:42+02:00",
            "tags": [
                "ИЕ",
                "Фаерфокс",
                "ЦСС"
            ],
            "_date_published_rfc2822": "Fri, 28 Jan 2005 14:43:10 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "1058",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [
                    "highlight\/highlight.js",
                    "highlight\/highlight.css"
                ],
                "og_images": []
            }
        },
        {
            "id": "1022",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/2005\/01\/08\/1\/",
            "title": "Following The CSS Standards",
            "content_html": "<blockquote>\n<p>Lets say you have a div that is set to 300 pixels in CSS. You then put a 250 pixel wide float inside that div. Immediately after that you have a 100 pixel wide overflow:hidden div. All sizes have been specified in CSS.<\/p>\n<p>Now here’s the pop quiz. What do you think the layout should be? Should the overflow div:<br \/>\n(a) Be on the same line with the float and spill out of the enclosing 300 pixel div<br \/>\n(b) Be placed underneath the float, automatically clearing it because there is insufficient space for<\/p>\n<\/blockquote>\n<p>the overflow div next to the float<\/p>\n<blockquote>\n<p>Before I give an answer, lets see what the CSS specification has to say on this issue.<\/p>\n<\/blockquote>\n<p><a href=\"http:\/\/weblogs.mozillazine.org\/hyatt\/archives\/2005_01.html#007252\">Surfin’ Safari<\/a><\/p>\n",
            "summary": "Lets say you have a div that is set to 300 pixels in CSS. You then put a 250 pixel wide float inside that div",
            "date_published": "2005-01-08T10:29:09+02:00",
            "date_modified": "2022-01-21T13:25:38+02:00",
            "tags": [
                "браузеры",
                "Сафари",
                "ЦСС"
            ],
            "_date_published_rfc2822": "Sat, 08 Jan 2005 10:29:09 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "1022",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "893",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/2004\/10\/25\/1\/",
            "title": "CSS Box Model",
            "content_html": "<p>(Как бы в сторону.) Господи, ну что курили люди из W3C, когда придумывали, что width бокса не включает padding... Это же просто потрясающий, вопиющий, выдающийся, неукладывающийся в голове идиотизм! Из-за этого вёрстка <i>всего<\/i> усложняется вдвое.<\/p>\n",
            "summary": "Как бы в сторону.) Господи, ну что курили люди из W3C, когда придумывали, что width бокса не включает padding",
            "date_published": "2004-10-24T22:43:18+02:00",
            "date_modified": "2004-10-24T22:43:18+02:00",
            "tags": [
                "ЦСС"
            ],
            "_date_published_rfc2822": "Sun, 24 Oct 2004 22:43:18 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "893",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "861",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/2004\/10\/06\/1\/",
            "title": "А ещё",
            "content_html": "<p><i>А ещё Мозилла рендерит одну и ту же страницу по-разному, в зависимости от того, где находилась полоса прокрутки в момент нажатия F5. По-моему, такого поведения можно добиться, только если целенаправленно его запрограммировать...<\/i><\/p>\n<p>Вопрос по существу. Стандарты не позволяют выровнять элемент по нижнему краю страницы либо экрана, в зависимости от того, что из этого выше. Однако табличная вёрстка с такой задачей с успехом справлялась, когда <tt>table height=&quot;100&quot;<\/tt>. Вроде бы, справляется она и сейчас: я делаю 100% таблицу из двух ячеек, одна под другой; внутри верхней делаю всё то, что должно быть на странице, используя нормальную CSS-вёрстку, а внутри нижней пишу копирайты и всё, что нужно.<\/p>\n<p>Как это всегда у меня и бывает, всё это отлично работает и в IE, и в Opera, и даже в Netscape 7, а в Mozilla и Firefox работать не хочет. Самое смешное, что совсем недавно я делал другую страницу ровно по тому же принципу, и она-таки работала везде.<\/p>\n<p>Кто знает надёжное решение этой проблемы?<\/p>\n<p><b>Update<\/b>: немного перекроил дивы — стало работать.<\/p>\n",
            "summary": "А ещё Мозилла рендерит одну и ту же страницу по-разному, в зависимости от того, где находилась полоса прокрутки в момент нажатия F5",
            "date_published": "2004-10-06T19:02:49+02:00",
            "date_modified": "2022-01-24T14:05:50+02:00",
            "tags": [
                "браузеры",
                "веб-разработка",
                "ХТМЛ",
                "ЦСС"
            ],
            "_date_published_rfc2822": "Wed, 06 Oct 2004 19:02:49 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "861",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "739",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/2004\/07\/05\/5\/",
            "title": "Календарь наезжает на Шарапову",
            "content_html": "<p>Вот <a href=\"\/meanwhile\/2004\/07\/03\/4\/comments\">здесь<\/a> календарь наезжает на Шарапову.<\/p>\n<p>Календарь — это <tt>&lt;div class=&quot;right_calendar&quot;&gt;<\/tt>:<\/p>\n<pre class=\"e2-text-code\"><code>div.right_calendar {\n  position: absolute;\n  top: -100px;\n  left: 60%;\n  width: 40%;\n}<\/code><\/pre><p>Если его просто убрать из HTML, то надпись «Мария Шарапова выиграла Wimbledon» смещается чуть ниже — как раз туда, где она должны быть, чтобы не пересекаться с календарём. Если вернуть, надпись поднимается выше пикселей на 30. Эффект наблюдается в IE 6 и Netscape 7. В Опере, естественно, не наблюдается. С каких пор у нас абсолютно позиционированные элементы affect normal flow? Кто умный, как сделать, чтобы не сползало?<\/p>\n",
            "summary": "Вот здесь календарь наезжает на Шарапову",
            "date_published": "2004-07-05T10:00:43+02:00",
            "date_modified": "2022-01-26T12:39:23+02:00",
            "tags": [
                "браузеры",
                "веб-разработка",
                "ХТМЛ",
                "ЦСС"
            ],
            "_date_published_rfc2822": "Mon, 05 Jul 2004 10:00:43 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "739",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "highlight\/highlight.js",
                    "highlight\/highlight.css"
                ],
                "og_images": []
            }
        },
        {
            "id": "584",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/2004\/04\/03\/2\/",
            "title": "Высота",
            "content_html": "<p>Как написать в CSS, что высота данного DIV’а равна высоте страницы?<\/p>\n<p><tt>height: 100%%<\/tt> не спасает, почему-то, в отличие от таблиц, дивы считают, что 100% — это высота клиентской части окна браузера (IE, Opera, Mozilla), поэтому, когда появляется скроллинг, то 100% уже составляют меньше реальной высоты страницы.<\/p>\n<p><tt>bottom: 0px<\/tt> тоже не спасает: даёт тот же эффект, что и предыдущий вариант, что уж совсем странно.<\/p>\n<p>Как сделать реальную высоту?<\/p>\n",
            "summary": "Как написать в CSS, что высота данного DIV’а равна высоте страницы?",
            "date_published": "2004-04-03T20:10:47+02:00",
            "date_modified": "2022-01-28T21:59:33+02:00",
            "tags": [
                "ЦСС"
            ],
            "_date_published_rfc2822": "Sat, 03 Apr 2004 20:10:47 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "584",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "468",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/2004\/01\/29\/1\/",
            "title": "Трабл",
            "content_html": "<p>Выяснилось, что у некоторых <a href=\"http:\/\/enclub.ru\">enclub.ru<\/a> отображается Таймсом, в то время как должен — Trebuchet MS. CSS выглядит примерно так:<\/p>\n<pre class=\"e2-text-code\"><code>font-family: Trebuchet MS, Arial, sans-serif;<\/code><\/pre><p>По идее, на системах, где нет Trebuchet MS должен использоваться Arial. Реально, выяснилось, что на некоторых системах он есть, но не кириллизован, например, Windows 2000. В результате браузер не пытается искать следующий шрифт, а кириллицу выводит дефолтом, то есть Таймсом.<\/p>\n<p>Что делать?<\/p>\n",
            "summary": "Выяснилось, что у некоторых enclub.ru отображается Таймсом, в то время как должен — Trebuchet MS. CSS выглядит примерно так...",
            "date_published": "2004-01-29T07:52:06+02:00",
            "date_modified": "2022-01-29T08:24:45+02:00",
            "tags": [
                "ЦСС",
                "шрифты",
                "я"
            ],
            "_date_published_rfc2822": "Thu, 29 Jan 2004 07:52:06 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "468",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "highlight\/highlight.js",
                    "highlight\/highlight.css"
                ],
                "og_images": []
            }
        },
        {
            "id": "420",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/2003\/12\/21\/1\/",
            "title": "Победа над флоатами",
            "content_html": "<p>Научился наконец справляться с флоатами в HTML\/CSS. С ними была такая проблема: если вертикальный размер у флоата больше, чем у текста, который его обтекает, а действие происходит внутри div’а, выкрашенного в зеленый, скажем, цвет, то вертикальный размер этого div’а становится равным вертикальному размеру текста, плюс поля. То есть получается, что флоат, скажем картинка, вылазит за див снизу. Когда этот div выкрашен в зеленый цвет, то эту засаду сразу видно. Всё это прямо следует из:<\/p>\n<blockquote>\n<p>Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist.<\/p>\n<\/blockquote>\n<p>© W3 Consortium<\/p>\n<p>Это хоть и соответствует спецификации, но это бред. Решение проблемы: внутрь зеленого div’а добавляем в самом конце<\/p>\n<pre class=\"e2-text-code\"><code>&lt;div class=&quot;fuck_w3c_standards&quot;&gt;&lt;\/div&gt;<\/code><\/pre><p>В CSS:<\/p>\n<pre class=\"e2-text-code\"><code>.fuck_w3c_standards {\n  clear: both;\n}<\/code><\/pre>",
            "summary": "Научился наконец справляться с флоатами в HTML\/CSS. С ними была такая проблема: если вертикальный размер у флоата больше, чем у текста, который его обтекает",
            "date_published": "2003-12-20T23:59:55+02:00",
            "date_modified": "2022-02-01T08:57:49+02:00",
            "tags": [
                "решения",
                "ЦСС"
            ],
            "_date_published_rfc2822": "Sat, 20 Dec 2003 23:59:55 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "420",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "highlight\/highlight.js",
                    "highlight\/highlight.css"
                ],
                "og_images": []
            }
        },
        {
            "id": "328",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/2003\/11\/04\/2\/",
            "title": "CSS",
            "content_html": "<p>Статья <a href=\"http:\/\/www.stopdesign.com\/also\/articles\/absolute\/\">Making the Absolute, Relative<\/a> о том как сделать абсолютное относительным (смайлик).<\/p>\n<p><b>Update<\/b>: Чем занимаются <a href=\"http:\/\/www.designdetector.com\/tips\/3DBorderDemo2.html\">больные люди<\/a> в свободное время.<\/p>\n<p><b>Update 2<\/b>: Больше <a href=\"http:\/\/www.alistapart.com\/articles\/taminglists\/\">смысла в XHTML<\/a>, больше внешнего вида в CSS. Автор пишет:<\/p>\n<blockquote>\n<p>I find that most pages on the web contain a menu of links in a navigation area. These are often marked up as a string of links, often in separate DIVs or paragraphs. Structurally, however, they are a list of links, and should be marked up as such.<\/p>\n<\/blockquote>\n<p><b>Update 3<\/b>: Еще одна статья, на этот раз с <a href=\"http:\/\/webmascon.com\/topics\/coding\/33a.asp\">русским переводом<\/a> от Webmascon.com, о том, как не делать версию для печати, а обойтись умным CSS. Я сам это давно придумал, только вот не реализовал. Если воспользоваться небольшим серверным скриптом, то это можно сделать без свойства content, которое не поддерживается IE.<\/p>\n<p><b>Update 4<\/b>: Еще можно хорошо повеселиться, <a href=\"http:\/\/www.alistapart.com\/articles\/slidingdoors\/\">организовав закладки<\/a> вместо простого списка ссылок. При этом HTML остается чистым списком ссылок (UL LI  A)<\/p>\n",
            "summary": "Статья Making the Absolute, Relative о том как сделать абсолютное относительным (смайлик)",
            "date_published": "2003-11-04T13:57:40+02:00",
            "date_modified": "2022-02-01T09:46:55+02:00",
            "tags": [
                "веб-дизайн",
                "ссылки",
                "ЦСС"
            ],
            "_date_published_rfc2822": "Tue, 04 Nov 2003 13:57:40 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "328",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        }
    ],
    "_e2_version": 4259,
    "_e2_ua_string": "Aegea 12.0a (v4259e)"
}