Рубрика: Статьи по CSS

В отдельных случаях без псевдоклассов просто не обойтись. Они определены в различных CSS спецификациях (CSS2 или CSS3) и без проблем поддерживаются большинством браузеров, за исключением IE.

В данной статье мы подробно рассмотрим принцип действия CSS селектора, а точнее псевдоселектора с именем :nth-child.

Замещаемые элементы, в отличие от других элементов страницы, могут иметь истинные размеры – ширину (width) и высоту (height), значения которых определяются свойственными внешнему объекту размерами.

Неординарный способ замены изображений исключительно методами CSS.

Перевод статьи Терри Кобленца Everything you Know about Clearfix is Wrong, в которой он затрагивает вопрос необоснованного использования хака clearfix и раскрывает тайну метода overflow:hidden.

Перевод статьи Николь Салливан «Our (CSS) Best Practices Are Killing Us», в которой автор указывает на проблемы, связанные со стереотипами CSS кодирования.

Средства CSS спецификации позволяют веб-разработчикам без труда создавать различные варианты представления страниц в зависимости от способа их отображения (монитор, принтер и не только).

В статье рассмотрен способ релизации URI медиа фрагментов, эмулирующий их поведение в пока еще не поддерживающих их браузерах.

Перевод статьи Николаса Галлахера &laqou;Better float containment in IE using CSS expressions&raqou;.

Без чего ваш дизайн не может считаться отзывчивым. Три основные критерия.

Комплексное использование спрайтов и псевдоэлементов позволяют вставлять в документ изображения наиболее удачным способом.

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

В статье рассматривается способ реализации анимированных миниатюр при помощи использования технологии CSS спрайтов и jQuery кода.

CSS спрайты являются мощным инструментом в веб-разработке, при помощи которого можно значительно улучшить интерактивность сайта путем сокращения HTTP запросов, необходимых для загрузки графических элементов содержимого страницы.

Возможные комбинации имен классов и идентификаторов в CSS селекторах.

Перевод статьи Джеффри Зельдмана – In Defense of Descendant Selectors and ID Elements.

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

Статья является простейшим и в тоже время эффективным средством знакомства с SASS. В ней идеально просто разъясняются принципы и задачи использования этого CSS модуля.

Предотвращение блокирования браузера при загрузке JavaScript кода – одна из основных задач веб-производительности.

Статья освещает один из нюансов отзывчивого дизайна, касающийся масштабирования изображений одновременно с изменениями размеров их контейнеров. Все очень просто.

Перевод статьи Роджера Йоханссона «CSS background-position and percent», в которой автор затрагивает проблему связанную с использованием процентных значений для свойства background-position.

Перевод статьи, в которой Крис Койер предлагает комбинированный способ использования CSS3 модуля Flexbox для улучшенной поддержки в барузерах адаптивного шаблона веб-страницы.

В этой статье мы рассмотрим пример применения одного из полезнейших псевдоклассов, предусмотренных спецификацией CSS3 — ::selection.

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

Как и большинство разработчиков, я в своих проектах постоянно применяю хак clearfix. Этот CSS прием также известен как Easy Clearing Hack — метод.

Перевод руководства по использованию технологии oEmbed.

В этой статье представлен доработанный вид хака clearfix, который предусматривает минимальное использование CSS кода.

Перевод статьи Николь Салливан Don’t Style Headings Using HTML5 Sections, в которой затрагивается тема стилизации заголовков в новой HTML5 спецификации, и не только.

Действительно ли использование медиа запросов полосы пропускания позволяет решить проблему корректного определения качества сетевого соединения? Ведь от этого зависит производительность ресурса.

все, имеющиеся ссылки при щелчке как бы «вдавливаются» внутрь страницы, смещаясь на один пиксель.

Перевод статьи Луиса Лазариса «When to Avoid the Descendant Selector», в которой автор еще раз поднимает вопрос оправданности использования дочерних CSS селектров.

Перевод статьи Гарри Робертса «Your logo is still an image… and so is mine!», в которой рассматривается оптимальный способ реализации логотипа сайта.

Перевод статьи Гарри Робертса, в которой рассматривается оптимальный способ реализации логотипа сайта.

Перевод статьи, автор которой делится опытом создания креативных элементов адаптивного дизайна в рамках реального проекта – сайта StartupGiraffe.

На данный момент это уже давно известный баг движка Webkit, который не позволял применять эффект анимации или трансформации к псевдоэлементам (типа ::before и ::after).

В статье детально рассматривается вопрос актуальности использования ID атрибутов и их роль в семантике документа. Перевод.

Зачастую в сфере веб-разработки сталкиваешься с такими терминами, которые вызывают массу вопросов. Именно к ним относятся Divitis и Classitis. Им и посвящается статья.

В ответ на статью Роджера Йоханссона о вариантах адаптации ширины элемента и его выравнивания по горизонтали, автор этой статьи, Каталин Росу предлагает свой метод решения проблемы.

Использование веб-шрифтов хорошая практика, однако она имеет свои побочные эффекты. Один из них – FOUT.

Перевод статьи Криса Койера, в которой автор разъясняет причины возникновения разночтений, связанных с применением CSS3 модулей компоновки шаблона веб-страницы – «флексбокс» (Flexbox).

Перевод статьи знаменитой стати Дэна Седерхольма – Faux Columns, в которой автор предлагает простой и в тоже время эффективный способ создания колоночного шаблона сайта.

Использование вьюпортовых единиц с целью масштабирования элементов для нужд отзывчивого дизайна. Связанные с ними проблемы и их решения.

Перевод известной статьи Терри Кобленца clearfix Reloaded + overflow:hidden Demystified на вечно актуальную тему улучшения соответсвующих хаков.

В данной статье приводится материал, позволяющий понять принципы вычисления фактического значения специфичности CSS селекторов и определения их приоритетности.

Перевод статьи Крисса Койера Off Canvas Menu with CSS :target, в которой автор делится опытом реализации адаптивного меню исключительно средствами CSS.

Псевдоэлементы являются очень полезным инструментом в веб-разработке, предоставляющим дополнительные возможности по работе с селекторами и элементами документа не прибегая при этом к дополнительной HTML разметке.

Иногда в процессе верстки сайта возникают ситуации, когда реализация отдельных дизайнерских мыслей связана с определенными трудностями, решение которых может затянуться на достаточно долгий период времени.

То, что может совершить революцию в веб-дизайне уже появилось на горизонте. Знакомимся пока что издалека – CSS фигуры.

Эта инструкция является достаточно мощным и полезным инструментом, используемым в веб-разработке, но ее нужно применять с осторожностью.

Объектно Ориентированный CSS (Object Oriented CSS – OOCSS) представляет собой концепцию CSS, которая предусматривает быстрое, легкое в обслуживании и отвечающее требованиям стандартов представление CSS кода.

Краткий ответ на этот вопрос в доступной и понятной форме содержит данная статья.

Рассматриваемый в статье CSS прием уже достаточно долгое время известен как clearfix хак.

Перевод статьи Гарри Робертса, в которой автор представляет собственный подход создания адаптивной сеточной системы, реализованный в его же библиотеке inuit.css.

Нужно ли все еще применять вендорные префиксы типа -moz и -webkit при использовании ставших популярными последнее время свойств типа border-radius или box-shadow?.

На горизонте появилось новое значение свойства display, которое в последствии должно избавить нас от повсеместного использования Clearfix.

Старый добрый Clearfix всегда подвергается каким-нибудь изменениям.

Оправдано ли медиа-запросы считаются неотъемлемой частью отзывчивого дизайна?.

Нюансы использования Flexbox глазами профессионала.

На примере одного из распространенных случаев автор попытался найти ответ на спорный вопрос использования полей и отступов.

Вторая часть статьи Гарри Робертса о методах CSS кодирования, имеющих дурную славу.