Рубрика «css» - 152

Каскадные Таблицы Стилей / Кроссбраузерные проблемы псевдокласса :active

С появлением множества нововведений в технологиях вёрстки веб страниц, у разработчиков появилась возможность отчасти заменить JavaScript, применяя HTML/CSS для большей производительности и расширяемости интерфейса своих порталов.
Помимо проблем с кроссбраузерностью и разной реализаций новых свойств CSS, часто приходится встречаться с другими проблемами в местах, где казалось бы, давно всё устаканилось и везде работает одинаково. Именно с такой проблемой мне пришлось столкнутся, применяя CSS transitions вместе с псевдоклассом :active. Видимо из-за того, что в документации отсутствует описание поведенияЧитать полностью »

Проблема и решение.
Privat1024 не от ПриватБанка
Оказалось, что web-интерфейс сервиса Приват24 не влазит в 1024px по ширине. И получается, что корзина с подготовленными платежами оказывается за экраном и человек вынужден скролить.

Пришлось написать юзер-стиль. Может кому тоже облегчит жизнь.

http://userstyles.org/styles/61370/privat1024
— ни один элемент интерфейса не убран, только уменьшены в размере
— правая колонка сужена
— рекламные блоки отображаются полупрозрачными, чтобы не отвлекали


<a rel="nofollow"Читать полностью »

Проблема и решение.
Privat1024 не от ПриватБанка
Оказалось, что web-интерфейс сервиса Приват24 не влазит в 1024px по ширине. И получается, что корзина с подготовленными платежами оказывается за экраном и человек вынужден скролить.

Пришлось написать юзер-стиль. Может кому тоже облегчит жизнь.

http://userstyles.org/styles/61370/privat1024
— ни один элемент интерфейса не убран, только уменьшены в размере
— правая колонка сужена
— рекламные блоки отображаются полупрозрачными, чтобы не отвлекали

Вид при 1024px
<a rel="nofollow"Читать полностью »

Небольшой рассказ о том, как корректно генерировать font для рунета. В центре внимания известный уже на Хабре буржуйский сервис fontsquirrel.

Если красота должна спасти мир, то дизайнеры web интерфейсов — это армия зла. Ни поймите меня не верно, сам считаю себе web дизайнером, и не могу перенести криворуких верстальщиков, приходится верстать свои же psd-изыскания, такими же кривыми руками. И тут начинается самое интересно…

Как все на практике:

1. Первым делом все упирается в выбор нужного шрифтового стека для рунета, и если бы не <a rel="nofollow"Читать полностью »

Ближе к двум часам ночи в голову в месте с мыслями о вечном приходят не менее вечные вопросы — «в чём смысл жизни ?», «зачем вообще человеку спать ?» или «Какого чёрта эта #%^$ не работает ?» и чем ближе утро, тем сильнее начинает волновать именно этот самый последний вопрос.
Чуть ниже я расскажу о том какого чёрта сss селекторы иногда не ведут себя так, как нам кажется правильным, и о том как они на самом деле должны себя вести.
Глава один – идём направо!

Селекторы взвешивают, чтобы узнать какой из стилей будет примененен, когда несколько селекторов так или иначе указывают на один и тот же элемент, и пытаютсяЧитать полностью »

Веб-стандарты / В продолжение темы защиты котят
Итак, неподражаемая Лиа Виру с ее блистательным призывом не позволить браузерной отсебятине причинить вред беззащитным пушистым созданиям, была услышана и на Хабре (если кто-то пропустил — срочно ознакомьтесь c переводом lahmatiy чуть ниже или моим переводом на css-live.ru — не пропадать же труду). Мы уже наслышаны о панике последней недели из-за намерения браузеров поддерживать чужие префиксы. Кто-то, возможно, успел подписать петицию против этого безобразия (как я). Кто-то, напротив, прислушивается к доводам Тантека Челика (между прочим, создателя микроформатов) и других экспертов, убеждающих, что не так всё страшно и еще немного бардакаЧитать полностью »

Каскадные Таблицы Стилей / Верстка HTML писем: думай как баг
Всем привет!
Продолжая работать над версткой почтовых рассылок, порой натыкаюсь на новые баги, о которых, собственно и хочу рассказать в этом топике. Если не приводить список из прошлых статей, то получится не много, но тем не менее они заслуживают внимания. Так же есть чуточку приятных моментов.
Cellspacing

Как я уже писал более года назад, стОит обнулять все отступы для таблиц, и там где нужны отступы — добавлять новые ячейки с прозрачной .gif распоркой. Я решил упростить себе задачу и поиграться с базовыми отступами для таблицы.
Задача: расположить четыре картинки в таблице — по две на каждой строке. МеждуЧитать полностью »

Здравствуйтее, хотел поделиться еще одним вариантом валидного хака для Internet Explorer'а.
Так как выносить стили для IE отдельный файл не всегда удобно, особенно в некоторых проектах, когда стили для определенной страниц хочется видеть в одном файле.
Хочу описать два варианта решения данной проблемы:
1. Вариант с использованием JavaScript:

Мы добавляем для body класс с именем браузера определенной версии, условные комментарии помогают избавиться от проблемы с неверным распознанием User Agent'а

document.body.className='ie7';

Читать полностью »

LESS — это популярный препроцессор для языка CSS, добавляющий возможности использовать константы, наследование, вложенные стили и много другое, чего так не хватает в CSS. Как только я познакомился с LESS я понял что это то, что мне нужно. Единственное, что омрачило мою радость — разработчики предлагают всего два варианта его использования: встраивать JavaScript файл, который занимается препроцессингом прямо в браузере или использовать специальный скрипт (который должен исполняться на node.js) который процессирует LESS файлы.
Вариант c процессингом LESS файлов на клиенте мне не понравился тем, что для больших LESS файлов это вызывает ощутимые паузы приЧитать полностью »

Каскадные Таблицы Стилей / Поговорим про :checked
В последнее время сложилось ощущение, что много людей пишет про создание табов (вкладок) на CSS.
Сейчас я хочу рассказать про ещё один способ создания вкладок на CSS (Предупреждая выпады в свою сторону, упомяну, что без :target).
Но обо всём по порядку.
:checked или немного теории

Итак, в CSS3 (В модуле css3-selectors) появился новый псевдокласс :checked.
Вкратце, этот псевдокласс применяется к тем input'ам (checkbox или radiobutton), которые выставлены пользователем в состояние выбора (checked).
Табы, табы, табы

Довольно много реализаций табов было описано (Например, вот тут сделано через поле input type=«text»Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js