company_banner

Подборка интересных CSS-рецептов «Голые пятницы #4»

  • Tutorial
голые пятницы

Здравствуй, дорогой читатель хабра!
Сегодня мы поговорим о «липких» блоках, новом свойстве для изображений object-fit, продвинутом использовании CSS-счетчиков, ключевом слове currentColor, и о том, есть ли анимация в z-index.

position: sticky


Не так давно появилось то, чего мы так долго ждали! Теперь мы можем создавать «липкие» блоки, которые будут вести себя как фиксированные, но при этом не перекрывать другие блоки. Иными словами, пока на странице есть свободное место, блок остается на месте, но, если при скролле страницы на это самое свободное место наезжают другие блоки, они двигают sticky-блок. Впрочем, лучше 1 раз увидеть.

position: sticky animation

Пока что поддерживают это свойство только Firefox и Safari последних версий, но для других браузеров можно просто задать любое другое позиционирование:

.sticky {
  position: static; /* указываем перед sticky */
  position: sticky;
  top: 0px; /* обязательно указываем позицию элемента */
}

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

Особенно это свойство пригодится в мобильных версиях сайтов, когда нам вроде бы и нужен элемент с фиксированным позиционированием, но он не должен перекрывать другие блоки, т.к. свободного места на экране мало. Да и в настольных версиях он смотрится довольно-таки интересно.

background-size для <img /> или волшебное свойство object-fit


Помните, как часто вам хотелось задать изображению свойство background-size? Ведь это так удобно: не нужно высчитывать ширину, высоту, следить за пропорциями. Так вот, теперь для этого есть замечательное свойство object-fit, которая очень неплохо поддерживается webkit-браузерами, и будет поддерживаться firefox-ом со следующей версии. Для всего остального есть полифил.

Принцип работы object-fit такой же, как у background-size для фоновых изображений, с той лишь разницей, что оно применяется для изображений, видео и других медиа-элементов:

.image__contain {
  object-fit: contain; // изображение ужимается или растягивается, чтобы полностью поместиться в область с сохранением пропорций
} 
.image__fill {
  object-fit: fill; // растягивается на всю область блока
}
.image__cover {
  object-fit: cover; // растягивается на всю область блока с сохранением пропорций и центрируется
}
.image__scale-down {
  object-fit: scale-down; // изображение ужимается (но не растягивается!), чтобы полностью поместиться в область с сохранением пропорций
}

css object-fit
Пример

Продвинутые CSS счетчики


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

Начнем с чего-нибудь простого. Например, с пэйджинации:

<div class="pages">
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
</div>

.pages {
  counter-reset: pages;
}
.pages a {
  counter-increment: pages;
}
.pages a:before {
  content: counter(pages);
}

Как видите, номера прописываются автоматически с помощью CSS. В реальных проектах это бесполезно, но, согласитесь, выглядит довольно забавно:)


Пример.

Также можно считать отмеченные пользователем элементы:

<div class="languages">
  <input id="c" type="checkbox"><label for="c">C</label>
  <input id="C++" type="checkbox"><label for="C++">C++</label>
  <input id="C#" type="checkbox"><label for="C#">C#</label>
  <input id="Java" type="checkbox"><label for="Java">Java</label>
  <input id="JavaScript" type="checkbox"><label for="JavaScript">JavaScript</label>
  <input id="PHP" type="checkbox"><label for="PHP">PHP</label>
  <input id="Python" type="checkbox"><label for="Python">Python</label>
  <input id="Ruby" type="checkbox"><label for="Ruby">Ruby</label>
</div>
<p class="total">
  Total selected:
</p>

.languages {
  counter-reset: characters;
}
input:checked {
  counter-increment: characters;
}
.total:after {
  content: counter(characters);
} 

Здесь мы увеличиваем значения счетчика на каждый отмеченный чекбокс с помощью селектора input:checked и выводим его значение.


Пример

Также можно написать небольшой калькулятор:

<div class="numbers">
  <input id="one" type="checkbox"><label for="one">1</label>
  <input id="two" type="checkbox"><label for="two">2</label>
  <input id="three" type="checkbox"><label for="three">3</label>
  <input id="four" type="checkbox"><label for="four">4</label>
  <input id="five" type="checkbox"><label for="five">5</label>
  <input id="one-hundred" type="checkbox"><label for="one-hundred">100</label>
</div>
<p class="sum">
  Sum 
</p>

.numbers {
  counter-reset: sum;
}
 
#one:checked { counter-increment: sum 1; }
#two:checked { counter-increment: sum 2; }
#three:checked { counter-increment: sum 3; }
#four:checked { counter-increment: sum 4; }
#five:checked { counter-increment: sum 5; }
#one-hundred:checked { counter-increment: sum 100; }
 
.sum::after {
  content: '= ' counter(sum);
} 

И вновь ничего сложно: для каждого чекбокса указывается число, на которое он увеличит значение счетчика, которое затем выводится.


Пример и статья (а также ее перевод), раскрывшая мне глаза.

currentColor


Уже достаточно давно (с момента выхода IE9) мы можем пользоваться замечательным, но малоизвестным ключевым словом currentColor. В чем его суть? Оно содержит в себе текущее значение цвета элемента, как наследованное от родителя, так и не наследуемое по умолчанию. Это позволяет не задавать по многу раз один и тот же цвет и иногда не вводить переменные (если вы работаете с препроцессорами).

Например, это может быть очень полезно при работе с SVG-иконками, которые меняют свой цвет в зависимости от состояния родителя. Обычно, нам пришлось бы записать это примерно так:

.button {
  color: black;
}
.button:hover {
  color: red;
}
.button:active {
  color: green;
}

.button svg {
  fill: black;
}
.button:hover svg {
  fill: red;
}
.button:active svg {
  fill: green;
}

но currentColor делает код куда лаконичнее:

svg {
  fill: currentColor;
}
 
.button {
  color: black;
  border: 1px solid currentColor;
}
.button:hover {
  color: red;
}
.button:active {
  color: green;
}

Еще один пример полезной области применения — псевдо-элементы:

a {
  color: #000;
}
a:hover {
  color: #333;
}
a:active {
  color: #666;
}
 
a:after,
a:hover:after,
a:active:after {
  background: currentColor;
  ...
}


Transition для z-index


Возможно, вы не догадывались, но свойство z-index также поддерживает анимированные переходы. Однако, оно меняет значения по шагам, поэтому кажется, что никакого перехода нет. Но он есть! Не дайте себя обмануть!

z-index transition

Отличный пример того, как это работает.

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

P.S. Отдельное спасибо пользователю DonSinDRom, который буквально засыпает меня ссылками на новые интересные css-фишки после каждой статьи :)

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

Оказалась ли для вас эта подборка полезной?

  • 75,3%Да, узнал много нового;922
  • 21,2%Новыми для меня оказалось 1-2 рецепта;260
  • 3,4%Все это я уже знал.42
Wargaming
Компания

Комментарии 32

    +7
    За sticky аплодирую стоя! Теперь еще одна фича делается без js.
      +5
      Жаль только, что хром пока не собирается его поддерживать)
        +9
        Есть polyfill:
          +1
          Почему-то, ни один из них не отрабатывает ситуацию, когда у окна браузера появляется горизонтальный скролл (на демках хорошо видно несуразность, достаточно сузить окно по горизонтали). Все сильно по-разному, когда динамически меняется ширина контейнера. Ужас с позиционированием на мобильных девайсах.
          увы
          увидел ссылки фиолетовыми.
          Или полноценная реализация полифилла для position: sticky это какой-то прямо вызов — найдется кто смелый? :)
          +2
          Ну, строго говоря, Хром-то его поддерживает прекрасно (именно в Хроме поддержка position: sticky и появилась в первую очередь, хоть и была спрятана за флагом). Начиная с 37й версии (судя по caniuse), его поддержку временно убрали, сославшись на сырость спецификации.

          code.google.com/p/chromium/issues/detail?id=231752
        0
        Первый пример с липким блоком, у меня не работает в Chrome 40 и Safari 8
        Mozilla FireFox 35 — флагман в этом деле.
        • НЛО прилетело и опубликовало эту надпись здесь
            0
            Спасибо! Добавил в статью)
            0
            Вопрос по счетчику(кам) (counter), сколько их может быть на странице?
              +1
              Сколько захотите. Инициализируете новый по counter-reset и добавляете инкремент через counter-increment.
                0
                Vend3tta написал все верно.
                Да, по сути, вы просто вводите новые переменные для разных счетчиков.
                  0
                  Vend3tta написал все верно.
                  Да, по сути, вы просто вводите новые переменные для разных счетчиков…
                  –1
                  Wargaming узнал о существовании CSS.
                    +3
                    Я вас удивлю: во всех наших сайтах используется CSS. А в некоторых даже CSS3 :)
                      +4
                      Ну, по судя по опросу, благодаря посту Wargaming 300 проголосовавших тоже узнали что-то новое — к чему тут сарказм?
                        –2
                        Отдел по двиганию кнопки разбежался в полном составеъ.
                        +2
                        Мне кажется, опрос в конце не совсем корректный:
                        Я, например, знал все, что в этой статье описано, но мне подборка понравилась =)
                        В конце концов, повторение — мать учения.
                          +1
                          Спасибо)
                          Вы правы. Переименую в «Оказалась ли подборка полезной» :)
                        • НЛО прилетело и опубликовало эту надпись здесь
                            0
                            Совершенно верно. В примере оставил именно так для наглядности.
                            0
                            А почему CSS счетчики бесполезны в реальных проектах?
                            Очень удобно стилизовать циферки в OL списках. Например так: github.com/very-good/css-code-style/blob/master/hints.md
                              0
                              Имел ввиду, бесполезны конкретно при создании пэйджинации)
                              А так, возможностей очень много. Хватило бы воображения.
                              +1
                              Спасибо, про counter не знал. Почему-то очень напомнило реализацию счетчиков в TeX
                              • НЛО прилетело и опубликовало эту надпись здесь
                                  0
                                  Перечисленные свойства — это содержимое миксина stretch?
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                      0
                                      Главная прелесть Object-fit в компактности)
                                  +1
                                  За currentColor — огромное спасибо, этого свойства реально не хватало порой
                                    0
                                    Всегда пожалуйста)
                                    +1
                                    Спасибо! Всё знал, но с currentColor ещё не сталкивался.
                                      0
                                      В LESS/SASS и не с таким столкнетесь.
                                        0
                                        Почитал статью о них здесь же на Хабре, выглядит как сильный инструмент

                                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                    Самое читаемое