Destio небольшой блог

HTML+CSS

Фиксированный внизу футер

Часто встречаемая разновидность футеров — прилепленная к странице снизу. Чтобы он так там и висел, не наползая на остальные элементы и не отрываясь от днища, нужно добавить немного свойств к основным элементам страницы: html { position: relative; min-height: 100%; } body { margin-bottom: 50px; } footer { bottom: 0; height: 50px; position: absolute; width: 100%; […]

Читать дальше

Иерархия базовых элементов сетки в Bootstrap

Когда я это писал, я трогал Bootstrap 3.3.7. Основные, сразу доступные блоки в сетке бутстрапа это, собственно, два корневых контейнера .container и .container-fluid, потом .row и еще кучки разных .col-*. Чтобы все нормально работало, стакало маржины и паддинги, нужно вкладывать их друг в друга в определенном порядке: .container и .container-fluid это внешние контейнеры, на странице […]

Читать дальше

Псевдокласс :nth-child()

Этот псевдокласс позволяет выбирать элементы по формуле an+b, где a и b – коэффициенты. А n изменяется от 0 до пока не кончатся элементы у селектора. Child значит что сам элемент является n-ным отродьем, а не его дочерние элементы. :nth-child(n) /* выбрать все элементы */ :nth-child(2n+1) или :nth-child(odd) /* выбрать все нечетные элементы */ :nth-child(2n) […]

Читать дальше

Как сбрасывать CSS кэш

Пока работаешь кэширование можно просто запретить в инструментах разработчика, но вот будущие посетители вряд ли придут с этими инструментами и вполне могут встретить расползшийся по всем углам сайт. Есть несколько разных способов это делать, но мне лень про них читать и писать. Два основных способа – генерировать новое название файла, какой-нибудь style.4gfdfh564.css; или добавлять параметры […]

Читать дальше

Размеры в CSS: em, rem или пиксели, 2016

em Где мое чучело: если погуглить, можно встретить сильные мнения о том, что, если размеры задавать не в em, то у тебя будет рак, а все посетители ослепнут. И нельзя будет менять размер шрифта каждый день без редизайна. Эта величина оторвана от реальности, потому что рендерится все равно будет в пикселях, глаз будет видеть пиксели, […]

Читать дальше