https://kizu.dev/ru/ Recent content in Статьи и эксперименты Романа Комарова Hugo -- gohugo.io ru Wed, 21 Dec 2016 00:00:00 +0000 https://kizu.dev/ru/just-en/ Wed, 21 Dec 2016 00:00:00 +0000 https://kizu.dev/ru/just-en/ Я перестал обновлять русскоязычную часть моего сайта, и в этой статье я описываю почему. Если коротко — у меня не получается находить время на написание одного и того же по два раза. Так что все новые статьи теперь публикуются только по-английски.<p><a href="https://kizu.dev/ru/just-en/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/conditions-for-css-variables/ Fri, 21 Oct 2016 00:00:00 +0000 https://kizu.dev/ru/conditions-for-css-variables/ Переменные в CSS очень мощные и позволяют делать множество интересных вещей. Но у нас пока нет нативных условных конструкций, которые бы мы применяли вместе с ними. В этой статье я расскажу об одном из обходных путей, который можно использовать в качестве таких псевдо-условий.<p><a href="https://kizu.dev/ru/conditions-for-css-variables/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/styling-inline-code/ Thu, 08 Sep 2016 00:00:00 +0000 https://kizu.dev/ru/styling-inline-code/ Когда я работал над новой версией моего сайта, я пытался побольше думать о том, как всё будет выглядеть и читаться с точки зрения типографики. Одной из вещей, с которыми у меня всегда были проблемы — как оформлять строчные блоки кода. Чаще всего, на их месте мы видим маленькие разноцветные прямоугольники. И чем больше ими набиваешь текст, тем хуже становится его читабельность. Пример взят из статьи в Википедии о CSS. Поглядите на все эти разноцветные прямоугольники.<p><a href="https://kizu.dev/ru/styling-inline-code/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/the-new-version-of-this-site/ Sat, 13 Aug 2016 00:00:00 +0000 https://kizu.dev/ru/the-new-version-of-this-site/ Примерно полтора месяца назад, 23 июняGo to a sidenote, я в очередной раз перезапустил свой сайт. Сложно вспомнить которая это уже версия. Но если считать с самого начала, с тех времён, когда я ещё не умел верстать, то это, получается, уже тринадцатая мажорная версия. Или около того. Конечно, если не учитывать незаконченные и выкинутые в корзину варианты. Side note: Да, с момента перезапуска до публикации этого поста прошло больше месяца — хотелось посмотреть как сайт будет себя вести и поправить ещё несколько моментов.<p><a href="https://kizu.dev/ru/the-new-version-of-this-site/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/nested-links/ Tue, 10 Feb 2015 00:00:00 +0000 https://kizu.dev/ru/nested-links/ Проблема В спецификации HTML есть множество разнообразных запретов. Обоснованность многих из них очень хочется оспорить. Один из примеров, с которым мне приходится сталкиваться чаще всего, — вложенные ссылки. Спецификация прямо запрещает вкладывать одну ссылку в другую: The a element […] Content model: transparent, but there must be no interactive content descendant. Если так сделать, то парсер браузера вас не поймёт и, как только встретит открывающий тег вложенной ссылки, закроет родительскую ссылку перед собой:<p><a href="https://kizu.dev/ru/nested-links/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/be-global/ Tue, 08 Apr 2014 00:00:00 +0000 https://kizu.dev/ru/be-global/ Я часто вижу отличные статьи и эксперименты на русском, и мне досадно, что я не могу поделиться ими с международным сообществом. Я считаю, что русскоязычным фронтендерам нужно писать больше на английском: у нас достаточно сильных и талантливых людей, чьи знания достойны более широкого внимания. Не стоит ограничивать себя рамками одного русского языка, нужно начать, наконец, экспортировать наши знания наружу, давать понять, что и мы что-то значим на мировом уровне. Конечно же, я не призываю отказаться от русского языка.<p><a href="https://kizu.dev/ru/be-global/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/flex-baseline/ Mon, 10 Feb 2014 00:00:00 +0000 https://kizu.dev/ru/flex-baseline/ Когда-то наилучшим решением для инлайновых блоков были, ну, инлайн-блоки. Мне они очень нравятся за то, что с их помощью можно решить множество задач. Но и они не всемогущи. Они не умеют правильно работать с вертикальным выравниванием текста по базовой линии шрифта. Причём проблема следует уже из спецификации (см. последний абзац): Для многострочных инлайн-блоков базовой линией является базовая линия последнего строчного бокса в обычном потоке. Если внутри инлайн-блока нет боксов обычного потока, или же у инлайн-блока стоит overflow отличный от visible, то базовой линией становится нижняя граница блока.<p><a href="https://kizu.dev/ru/flex-baseline/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/new-stylus-features/ Thu, 05 Dec 2013 00:00:00 +0000 https://kizu.dev/ru/new-stylus-features/ Полгода назад я стал мейнтейнеромGo to a sidenote Стайлуса — отличного препроцессора для CSS. Side note: О том, как это произошло и чем именно я там занимаюсь, я напишу как-нибудь в другой раз, тут стоит заметить только то, что я являюсь именно мейнтейнером, а основным разработчиком сейчас является мой коллега Миша Корепанов. Jump to this sidenote’s context. Side note: Можете сразу промотать до его пошагового описания, либо до результирующего кода. Jump to this sidenote’s context.<p><a href="https://kizu.dev/ru/new-stylus-features/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/ios7/ Thu, 19 Sep 2013 00:00:00 +0000 https://kizu.dev/ru/ios7/ Вышла седьмая версия iOS. Обновление очень большое, почти всё переделано, в итоге многое стало сильно лучше, а многое — сильно хуже. В этой заметке я попробую перечислить те изменения, что я заметил и посчитал интересными. В основном я буду касаться самой iOS и нативных приложений (за исключением СафариGo to a sidenote). Порядок произвольный, если увижу ещё что-то достойное упоминания, пост будет обновлён. Side note: Про Сафари появилась отличная статья, описывающая все изменения.<p><a href="https://kizu.dev/ru/ios7/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/think-before-read/ Tue, 06 Aug 2013 00:00:00 +0000 https://kizu.dev/ru/think-before-read/ Люблю это чувство: читаешь заголовок и первые строки статьи, и уже в этот момент, ещё до прочтения статьи целиком, понимаешь, о чём будет речь, как будет решена та или иная проблема, или же и вовсе вспоминаешь или придумываешь лучшее решение поставленной задачи. Кстати, почти об этом же я рассказывал в рамках доклада «Бесчеловечные эксперименты над CSS»: о том, что хороший способ чему-то научиться — перед заглядыванием в код того или иного примера попробовать сделать его с нуля.<p><a href="https://kizu.dev/ru/think-before-read/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/docs-not-at-wiki/ Thu, 01 Aug 2013 00:00:00 +0000 https://kizu.dev/ru/docs-not-at-wiki/ Давно хотел поделиться небольшим наблюдением: я часто вижу, что люди хранят документацию в вики Гитхаба. Я считаю, что так делать нельзя. Ни в коем случае. Лучшее место для документации — сам репозиторий проекта. Аргументы: В вики нет синхронизации версии кода с версией документации. В вики текст всегда отображается самый актуальный, он не зависит от того, на какой коммит смотрят пользователи через веб-интерфейс. Поэтому, если возникает необходимость узнать какой был API у конкретной версии кода, придётся вручную пытаться найти в истории вики момент, когда её содержимое совпадало с нужной действительностью.<p><a href="https://kizu.dev/ru/docs-not-at-wiki/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/updated-jekyll/ Wed, 05 Jun 2013 00:00:00 +0000 https://kizu.dev/ru/updated-jekyll/ Недавно Jekyll стал совсем большим — была выпущена версия «1.0». В ченджлоге довольно много изменений: есть как новые фичи, так и всяческие исправления. О том, что критично знать про это обновление, можно прочитать в этой статье. Я перевёл свой сайт на эту версию. Ну, как перевёл, — всё и так работало, но зато появилась возможность многое сделать оптимальнее. Напишу немного о том, что же лично для меня интересного появилось в Jekyll 1.<p><a href="https://kizu.dev/ru/updated-jekyll/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/application-shortcuts/ Mon, 03 Jun 2013 00:00:00 +0000 https://kizu.dev/ru/application-shortcuts/ Давно хотел рассказать про этот подход к работе (workflow) — использование шорткатов для переключения между приложениями. Речь не о системных шорткатах вида cmd+tab/alt+tab. Такие шорткаты, на самом деле, ужасны, так как модальны. В каждый момент времени результат применения такого шортката может быть совершенно любым: «альт-таб» переключает фокус между последними открытыми приложениями, поэтому нужно помнить, что же у тебя было открыто раньше и в каком порядке. Решение проблемы с переключениями между несколькими приложениями показал мне в декабре 2009 года Виталий Харисов: достаточно назначить на каждое часто используемое приложение свой шорткат.<p><a href="https://kizu.dev/ru/application-shortcuts/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/cursor-text/ Fri, 17 May 2013 00:00:00 +0000 https://kizu.dev/ru/cursor-text/ Я уже писал о том, что на все активные элементы нужно вешать cursor:pointer. Если кратко, то смена курсора должна означать, что с элементом под ним можно что-то сделать, а не то, что элемент под курсором несёт какую-то семантику (скажем, является ссылкой, а не кнопкой). Основная причина для этого — единообразие. Пользователи должны знать, что если курсор — рука, значит, можно на этот элемент нажать, чтобы что-то произошло. А уж о том что именно произойдёт должен уже говорить сам элемент.<p><a href="https://kizu.dev/ru/cursor-text/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/hello-blog/ Tue, 07 May 2013 00:00:00 +0000 https://kizu.dev/ru/hello-blog/ Привет! В посте про перезапуск сайта я написал, что основной задачей новой версии было упрощение добавления новых записей. Однако, за технической стороной дела я совсем забыл о том, что же именно я хотел так легко и просто писать. Всё, что я публиковал на своём сайте, делилось на две части: «заметки» и «эксперименты». В «заметках» я старался публиковать в основном объективные, аргументированные, «выстраданные» вещи. Можно было назвать это «статьями», но мне это слово не нравится.<p><a href="https://kizu.dev/ru/hello-blog/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/rotated-text/ Tue, 30 Apr 2013 00:00:00 +0000 https://kizu.dev/ru/rotated-text/ Некоторое время назад я уже делился этим решением в соцсетях, но на этот раз хочу написать о нём немного подробнее. Задача: получить повёрнутый на 90 градусов текст. Проблема: широко известно, что при использовании transform, блок ведёт себя аналогично сдвигу через position:relative — продолжает занимать место в потоке по состоянию до трансформации, так что, по факту, изменение происходит только визуальное. Однако, довольно часто можно захотеть повернуть блок так, чтобы этот поворот влиял и на поток.<p><a href="https://kizu.dev/ru/rotated-text/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/markdowning-yaml/ Sun, 21 Apr 2013 00:00:00 +0000 https://kizu.dev/ru/markdowning-yaml/ Пока я всё никак не допишу какой-либо из длинных постов, попробую выложить несколько мелких заметок. Начну с небольшого трюка для Jekyll. Для настройки метаданных (заголовок, лейаут, дата, всё такое) в Jekyll используется «YAML front matter» — описание всех этих данных в специально оформленном коде, который обязательно должен идти в начале файла. Jekyll в принципе «видит» только те страницы, у которых этот заголовок есть, поэтому YAML front matter — довольно важная часть.<p><a href="https://kizu.dev/ru/markdowning-yaml/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/going-jekyll/ Wed, 30 Jan 2013 00:00:00 +0000 https://kizu.dev/ru/going-jekyll/ В посте про перезапуск я пообещал написать серию статей про Jekyll. Это — первая, вводная, заметка из серии. Я не буду подробно описывать что же такое Jekyll, как его установить, какая у него файловая структура и так далее — про это уже написано довольно много статей (см. ниже в «ссылках»). Если кратко, то это статический генератор сайтов с прицелом на блоги. GitHub Pages Начну с главного: эту и последующие статьи я буду писать в контексте сервиса GitHub Pages.<p><a href="https://kizu.dev/ru/going-jekyll/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/cursor-pointer/ Tue, 22 Jan 2013 00:00:00 +0000 https://kizu.dev/ru/cursor-pointer/ На всех активных элементах по наведению должен меняться курсор. В большинстве случаев это будет cursor: pointer. Под активными элементами подразумеваются ссылки, кнопки, селекты, лейблы вместе с чекбоксами или радиокнопками и другие аналогичные элементы. «Активными» такие элементы должны называться, когда нажатие на подобный элемент вызывает какое-либо действие. Таким образом, ведущий на текущую страницу пункт меню, выбранная радиокнопка или задизейбленные кнопки и ссылки — не активные элементы, и по наведению на них ничего не должно меняться.<p><a href="https://kizu.dev/ru/cursor-pointer/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/restart/ Thu, 17 Jan 2013 00:00:00 +0000 https://kizu.dev/ru/restart/ Привет! Я очень долго шёл к этому, и вот оно случилось — я перезапускаю свой сайт. Мне сложно сосчитать, какая по счёту это версия — кажется, что их было уже около десяти. Каково главное отличие этой версии? Она сырая! Она дичайше, ужасающе непроработанная, корявая, сломанная. Не смотрите в исходники, правда. И это не терновый куст — там сейчас взаправду всё плохо. Почему? Потому что я решил бороться с перфекционизмом. Раньше я вылизывал, вытачивал и отшлифовывал свой сайт и его код; предъявлял сайт миру только когда меня всё устраивало.<p><a href="https://kizu.dev/ru/restart/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/bemto/ Mon, 02 Jul 2012 00:00:00 +0000 https://kizu.dev/ru/bemto/ Привет. Вот то, над чем я в последнее время немного работаю — bemto — набор миксинов для Jade, позволяющих легко и просто писать код в нотации БЭМ. Я очень люблю писать код, следуя БЭМ, а также мне очень нравится Jade, так что я подумал, что имеет смысл добавить немного БЭМа в Jade. И, надеюсь, что кому-то это тоже может пригодиться. Если вы ещё не читали статью про БЭМ в Smashing Magazine или статью Николаса Галлахера про архитектуру фронтенда — сейчас самое время это сделать.<p><a href="https://kizu.dev/ru/bemto/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/legends-and-headings/ Fri, 27 Apr 2012 00:00:00 +0000 https://kizu.dev/ru/legends-and-headings/ Однажды в декабре я решил посмотреть, что же можно сделать с элементом legend. Я хотел подвигать его внутри родительского филдсета, но мне не хотелось целиком сбивать стили: у филдсета с легендой есть уникальное поведение — под легенду резервируется пустое пространство. В итоге, путём пары хаков, я сделал несколько вариантов: с легендой справа, центрированной и даже с двумя легендами с разных сторон. Проще всего оказалось с первым вариантом: чтобы спозиционировать легенду вправо достаточно применить на родителе direction: rtl, ну и потом не забыть для детей восстановить его значение в ltr.<p><a href="https://kizu.dev/ru/legends-and-headings/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/shadowscroll/ Sat, 21 Apr 2012 00:00:00 +0000 https://kizu.dev/ru/shadowscroll/ Сверстал тут довольно старый эффект, но вот только на чистом CSS. Изначально делал с враппером и двумя лишними псевдоэлементами и box-shadow, но потом чуть подумал и реализовал только на одном блоке — с помощью радиальных градиентов. У метода есть некоторое число ограничений: фон должен быть сплошным (хотя, если взять background-attachment: fixed…), блок должен иметь определённое позиционирование, но в остальном — метод довольно ударопрочный. Если делать не через CSS-градиенты, а используя обычные изображения, то метод должен будет заработать и в IE, но я не проверял.<p><a href="https://kizu.dev/ru/shadowscroll/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/multi-directional-hover/ Mon, 19 Mar 2012 00:00:00 +0000 https://kizu.dev/ru/multi-directional-hover/ Попробуйте понаводить курсор на этот блок с разных сторон /* Multi-directional hover by @kizmarh */ .b-block { position: relative; display: inline-block; overflow: hidden; width: 10em; height: 10em; vertical-align: middle; -webkit-transform: translateZ(0); } /* The blocks that would be hovered */ .b-block__hoverer { position: absolute; z-index: 1; width: 71%; height: 71%; transform: rotate(45deg); } /* Positioning for hoverers */ .b-block__hoverer:nth-child(1) { top: 0; right: 0; transform-origin: 100% 0; } .b-block__hoverer:nth-child(2) { bottom: 0; right: 0; transform-origin: 100% 100%; } .<p><a href="https://kizu.dev/ru/multi-directional-hover/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/path-ui/ Mon, 05 Dec 2011 00:00:00 +0000 https://kizu.dev/ru/path-ui/ Небольшое вступление. Я решил попробовать новый для себя жанр — обычно я не высказываю свои мысли по поводу тех или иных интерфейсов, однако, всегда их анализирую и тщательно разбираю. На этот раз я решил сделать исключение: написать об этом печатный текст, т.к. в Path оказалось довольно много вкусных решений. Итак, Path. Это новая социальная сеть, в первую очередь ориентированная на мобильные устройства: на самом деле пока что она доступна только в версиях для айфона и для андроидов.<p><a href="https://kizu.dev/ru/path-ui/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/polygons/ Sun, 18 Sep 2011 00:00:00 +0000 https://kizu.dev/ru/polygons/ Используя вращение при помощи трансформов, overflow:hidden и связку visibility:hidden для врапперов и visibility:visible у последнего ребёнка, можно делать любые выпуклые маски, честно кликабельные по всей своей площади. Я даже создал для этого дела проектик на гитхабе — присылайте пулл реквесты с новыми формами :)<p><a href="https://kizu.dev/ru/polygons/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/bemto-concept/ Thu, 23 Jun 2011 00:00:00 +0000 https://kizu.dev/ru/bemto-concept/ Такая идея! Сначала я хотел сделать работающий прототип, но потом подумал, что имеет смысл, хотя бы для себя, записать концепцию «на бумаге». Итак. Что такое БЭМ вы, надеюсь, уже знаете. Сам по себе БЭМ таков, что имена классов для него раздуваются, порой, донельзя. При этом, идея вполне поддаётся автоматизации, так что в клубе по ссылке выше можно и об этом почитать. Однако, я всегда любил писать код руками, любил статичный html, и ничего не могу с собой поделать.<p><a href="https://kizu.dev/ru/bemto-concept/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/tap-to-padding/ Mon, 18 Apr 2011 00:00:00 +0000 https://kizu.dev/ru/tap-to-padding/ Я решил, что раз уж времени на большие посты у меня не хватает, а писать что-то всё-равно хочется, то буду писать о всяких мелочах, которые замечаю. Довольно банальная вещь, которая может довольно сильно влиять на восприятие страниц при просмотре их под Сафари в iOS: при зуме через дабл-тап происходит приближение к тому элементу под тапом, который находится ближе всего в дереве и имеет не инлайновое позиционирование. Иногда это может сыграть дурную шутку, особенно в случаях когда внутренние элементы как-то хитро позиционируются из контейнера.<p><a href="https://kizu.dev/ru/tap-to-padding/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/chevron/ Sun, 03 Apr 2011 00:00:00 +0000 https://kizu.dev/ru/chevron/ Всё довольно просто: только CSS и HTML, хотя HTML в итоге получается ужасающим. Смысл этого эксперимента вот в чём: в дропдаун, который показывается по клику на «ещё», автоматически помещаются все пункты, которые не поместились в одну строчку по ширине. При этом заранее неизвестно ни количество элементов, ни их ширина, ни ширина родителя — и всё это без JS. --- framed: true outdented: true --- /*_*/ #Demo_chevron { background: #FFF; } /* Fix for +/~ selectors in webkit */ @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } .<p><a href="https://kizu.dev/ru/chevron/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/overflower/ Tue, 08 Mar 2011 00:00:00 +0000 https://kizu.dev/ru/overflower/ Эффект «скрытия контента» появляется только если есть что скрывать (следовательно, не будет ситуации когда места для контента хватает, но визуально кажется, что уже что-то скрыто). Можно навесить title на элемент или что-то ещё только если возникает необходимость. Метод должен работать как минимум IE7+, хотя данные примеры для него не оптимизированы (работает только тултип). Можно поизменять размер окна, чтобы увидеть момент перехода. /*_*/ .b-overflower { position: relative; height: 2.<p><a href="https://kizu.dev/ru/overflower/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/filters/ Sun, 06 Feb 2011 00:00:00 +0000 https://kizu.dev/ru/filters/ Цвета — просто чекбоксы. формы — радиобатоны с дополнительным свойством: их можно «анчекать». Только CSS, никакого JS. Опять же — только современные браузеры, в IE можно было бы эмулировать экспрешнами, но лень.<p><a href="https://kizu.dev/ru/filters/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/popups/ Sat, 05 Feb 2011 00:00:00 +0000 https://kizu.dev/ru/popups/ /*_*/ /* Dropdowns -----------------------------*/ .b-dropdown { position: relative; display: inline-block; } .b-dropdown-handle { border-bottom: 1px dotted; text-decoration: none; cursor: pointer; white-space: nowrap; position: relative; z-index: 9; color: blue; } .b-dropdown-helper:checked+.b-dropdown .b-dropdown-handle { z-index: auto; } .b-dropdown-handle:hover { color: #F00; } .b-dropdown-popup { position: absolute; top: 100%; right: 50%; z-index: 9; visibility: hidden; opacity: 0; margin: 10px 0 0; font-size: .8571em; -webkit-transition: opacity .2s, visibility .2s; -moz-transition: opacity .2s, visibility .<p><a href="https://kizu.dev/ru/popups/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/controls/ Thu, 03 Feb 2011 00:00:00 +0000 https://kizu.dev/ru/controls/ /*_*/ .b-radio-label { cursor: pointer; } .b-radio-input:checked+.b-radio-wrap.b-radio-label { cursor: default; } /* Slider --------------------------*/ .b-radio_slider { position: relative; width: 401px; padding-left: 0; margin-left: 0; overflow: hidden; border: 1px solid #666688; white-space: nowrap; text-indent: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background: #a1dbff; /* old browsers */ background: -moz-linear-gradient(top, #a1dbff 0%, #cbebff 47%, #f0f9ff 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a1dbff), color-stop(47%,#cbebff), color-stop(100%,#f0f9ff)); /* webkit */ -webkit-border-radius: .<p><a href="https://kizu.dev/ru/controls/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/rounded-inner-corners/ Wed, 12 May 2010 00:00:00 +0000 https://kizu.dev/ru/rounded-inner-corners/ /*_*/ /* Bubble with tail ---------------------------------------- */ .b-bubble { position:relative; width:6em; height:3em; margin:0 auto 2em; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; text-align:center; font:normal italic 3em/2.9 Georgia; font-size:3em; line-height:2.9em; background:#BF6; color:#FFF; } /* Tail */ .b-bubble:before, .b-bubble:after, x:nth-child(1) { content:""; position:absolute; top:100%; width:1em; height:1em; border:solid #BF6; } .b-bubble:before, x:nth-child(1) { right:50%; border-width:1em 1em 0 0; margin:-1em -1em 0 0; -webkit-border-top-right-radius: 2em; -moz-border-radius-topright: 2em; border-top-right-radius: 2em; clip: rect(1em 1em auto auto); } .<p><a href="https://kizu.dev/ru/rounded-inner-corners/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/wbr/ Tue, 19 May 2009 00:00:00 +0000 https://kizu.dev/ru/wbr/ Некоторые, наверное, знают про тег WBR, когда-то давно использовавшийся для того, чтобы переносить слишком длинные слова, если возникает такая необходимость. Основные проблемы этого тега две: он не работает в Опере он не валидный К счастью, эмулировать его достаточно легко. Кроме того, при помощи этой эмуляции можно починить поведение тега в Опере. Вот примерное решение: lalala&lt;i class=&quot;wbr&quot;&gt;&lt;/i&gt;lalala и WBR, .wbr { display: inline-block; } Единственный момент, который остаётся за рамками эмуляции: в IE WBR может создавать разрыв строки при white-space:nowrap.<p><a href="https://kizu.dev/ru/wbr/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/sup-and-sub/ Sun, 11 Jan 2009 00:00:00 +0000 https://kizu.dev/ru/sup-and-sub/ Наверное, почти все знают про теги SUP и SUB. Довольно подробное описание можно найти в статье английской википедии. Основная проблема в стандартной реализации отображения этих тегов — изменение высоты строки за счёт того, что текст в этих тегах выравнивается свойством CSS vertical-align. Это изменение варьируется от браузера к браузеру, но, кроме того, везде различаются как размеры шрифта для таких элементов, так и сами отступы. Об этой проблеме многие знают и, чаще всего, предлагают два решения: уменьшение высоты строки этих элементов, и их относительное позиционирования.<p><a href="https://kizu.dev/ru/sup-and-sub/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/ie-a-hover/ Tue, 30 Dec 2008 00:00:00 +0000 https://kizu.dev/ru/ie-a-hover/ В этой заметке я опишу один момент, который довольно часто можно встретить в сложной вёрстке с CSS, но который редко проявляет себя или на который редко обращают внимание. Этот момент проявляет себя в случае когда в IE внутри ссылки есть блок со свойством hasLayout, тогда можно заметить следующее: клик по картинке, расположенной в таком блоке, не вызывает переход по ссылке; при правом клике по блоку с hasLayout не появляется контекстное меню ссылки (т.<p><a href="https://kizu.dev/ru/ie-a-hover/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/multiclass/ Mon, 22 Dec 2008 00:00:00 +0000 https://kizu.dev/ru/multiclass/ Одними из самых приятных селекторов в CSS могли бы стать множественные классы. Стилизация в зависимости от цепочки классов, прописанных одному элементу могла бы быть очень заманчивой, однако, как всегда, всё портит IE6. Собственно, сразу к делу. Вот пример применения нескольких классов. В нормальных браузерах первые две строчки будут иметь зелёный фон, тогда как IE6 — красный. Это возникает за счёт того, что: При использовании цепочки классов, например .class1.class2 {…} IE6 совершенно игнорирует все классы, кроме последнего в селекторе.<p><a href="https://kizu.dev/ru/multiclass/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/rel-tag/ Wed, 03 Dec 2008 00:00:00 +0000 https://kizu.dev/ru/rel-tag/ Веб-стандартисты и сторонники семантической вёрстки очень любят микроформаты. Кто-то их разрабатывает, обсуждает и выкладывает всю необходимую информацию на официальном сайте микроформатов. Я, хоть и не разрабатываю их, но слежу за ними, и, бывает, моё мнение не совпадает с мнением сообщества. В этот раз оно не совпало относительно микроформата rel-tag. Основной момент, с которым я не согласен — то, что этот микроформат требует достаточно странной имплементации. Но, судя по всему, и в самой среде разработчиков это не до конца решённый вопрос (в XMDP profile ничего не сказано про href, этот валидатор не видит проблемы в теге A без хрефа, тогда как во всех текстах указывается только вариант с хрефом, ну и плагин-валидатор Operator ругается на его отсутствие).<p><a href="https://kizu.dev/ru/rel-tag/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/inline-block-solved/ Tue, 30 Sep 2008 00:00:00 +0000 https://kizu.dev/ru/inline-block-solved/ Одним из самых интересных свойств в CSS является inline-block. Возможность создавать блоки, ведущие себя как строчные элементы потенциально несёт очень много радости. С одной стороны, можно управлять такими блоками при помощи text-align, с другой — внедрять в текст, используя или как иконки, или как отдельные смысловые элементы, вместе с остальным текстом переносящиеся со строчки на строчку и обтекаемые флоатами. Однако, существуют две причины, по которой вёрстка с использованием подобных блоков почти не получила распространения:<p><a href="https://kizu.dev/ru/inline-block-solved/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/select-label/ Fri, 26 Sep 2008 00:00:00 +0000 https://kizu.dev/ru/select-label/ В различных формах часто можно встретить элемент SELECT, в котором первым пунктом ставят фразу вроде «Выберите что-нибудь». Чаще всего, её просто вставляют ни о чём не задумываясь. Однако, есть два момента, которые можно учесть: В идеале, этот первый пункт вообще не должен быть элементом OPTION, так как он по сути не опция, а заголовок для селекта. Но в спецификации подобного элемента предусмотрено не было. Так что, можно минимизировать влияние этого элемента на семантику, вынеся этот заголовок из содержимого элемента OPTION в его атрибут label.<p><a href="https://kizu.dev/ru/select-label/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/browsers-vs-tables/ Sun, 25 May 2008 00:00:00 +0000 https://kizu.dev/ru/browsers-vs-tables/ Сложные таблицы являются, наверное, одним из самых интересных мест в верстке. В последнее время мне нужно верстать очень много таблиц, при этом разных и со всякими дополнительными элементами. И требованиями. В этой статье я расскажу про несколько моментов, с которыми я встретился за последние пару месяцев. Выделение таблиц и TFOOT По спецификации блок TFOOT должен идти до блока TBODY, при этом в самой таблице он выводится последним. С первого взгляда всё нормально, но если вдруг нам надо будет выделить содержимое таблицы мы столкнемся с тем, что в отображении TFOOT ставится в конец только визуально и выделяя текст в таблице выделение будет вести себя соответственно: выделяя всю таблицу с верхнего левого угла по нижний правый мы выделим всю таблицу за исключением TBODY (В Opera, однако, алгоритм слегка иной, и можно таким образом выделить всю таблицу, но и своих глюков с этим в ней хватает).<p><a href="https://kizu.dev/ru/browsers-vs-tables/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/five-tips/ Wed, 21 May 2008 00:00:00 +0000 https://kizu.dev/ru/five-tips/ Ну, раз уж мне передали эстафету, выскажусь. Тем более есть что сказать. Начиная верстать какой-либо макет, лучше всего делать сперва разметку семантичной и минимальной; никаких лишних обрамляющих блоков, лишних элементов и прочего — в итоге получим чёткую структуру и сразу можно будет увидеть сложные и неоднозначные места. Дальше уже можно смотреть на дизайн и размышлять во что бы обернуть имеющееся, стараясь сохранить логическую последовательность в целостности. Никогда-никогда-никогда нельзя поддаваться соблазнам и верстать только под один-два браузера.<p><a href="https://kizu.dev/ru/five-tips/">Прочитайте статьи целиком на kizu.dev</a></p> https://kizu.dev/ru/safari-and-textarea/ Mon, 17 Mar 2008 00:00:00 +0000 https://kizu.dev/ru/safari-and-textarea/ Одним из достоинств Сафари является наличие у текстовых полей (textarea) уголочка, за который можно потянуть и, соответственно, растянуть поле по вкусу. Однако, часто верстальщикам приходится вписывать текстовое поле в какой-нибудь навороченный дизайн и иногда можно обнаружить, что при изменении размеров текстового поля макет рушится, взрывается и что только с ним не происходит (смотря как тянуть). Решение же простое — использовать свойства CSS min-width, max-width и такие же -height; с помощью них можно очень просто настроить желаемое поведение текстовых полей в сафари.<p><a href="https://kizu.dev/ru/safari-and-textarea/">Прочитайте статьи целиком на kizu.dev</a></p>