Как сделать размер элементов вложенных списков одинаковым

Tags: css, css3

nested-lists

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

.content-items ul, .content-items ol {  font-size: 1.4em; } 

В результате я получил последовательное увеличение размера шрифта вложенных списков. Что и следовало ожидать, так как указание размера в em или процентах задаётся относительно родительского элемента (я использую технику установки размера шрифта для элемента body равного 62.5%). Поиск в Сети дал рекомендацию добавить следующий стиль:

li li, li p { font-size: 1em; }

…но почему-то это не сработало. Я ещё очень далёк от совершенства в CSS. Улыбка

В результате дальнейших поисков я нашёл решение, основанное на использовании новых единиц, ставших доступных в CSS3. Это единица rem, что происходит от сокращения root em. Размеры в rem относительны размерам, установленным для html-элемента, а не родительского элемента.

Таким образом решением моей проблемы стал следующий CSS-код:

.content-items ul, .content-items ol { font-size: 14px; font-size: 1.4rem; } 

Здесь размер в пикселях задан для совместимости с браузерами, не поддерживающими CSS3 в полной мере. Новые же браузеры, по законам обработки CSS будут использовать последнее заданное значение, то есть значение в rem. Помимо этого пришлось задать базовый размер в процентах не на элементе body, а на элементе html.

Я полностью отказался от использования размеров шрифтов в em и перешёл на использования подобных пар значений, ибо CSS-код получается компактнее и более предсказуемо работает.