регулярні вирази на службі в CSS

Попросили поправити маніакальний випадок — профіксити деформацію збільшення фото в мобільній версії. Теоретично все вирішувалось задаванням параметру: “top:0px; ” для боксу з класом “.ilightbox-holder.supportTouch.dark”. Сам стиль,  який слід було переприділити вносився скриптом в тіло об’єкту.

Нажаль, відключити слайдер в мобільних девайсах не було можливості, а завдання вирішити все через CSS ускладнювало те, що подібний клас мали ще два блоки (попереднього та наступного слайду). Відтак, коли ти перебивав стиль основного слайду, то він транслювався і на решту, які просто наповзалои наверх.

@media screen and (orientation: landscape) { 
 
div[class="ilightbox-holder supportTouch dark"]{
top: 0px!important;
}

}

Вирішилось все доволі просто і без хардкоду:

  • я вніс параметри для альбомного варіанту
    orientation: landscape
  • використавши для селектору категоричну прив’язку, замість класичної.
    div[class="ilightbox-holder supportTouch dark"]

Приклад інших подібних селекторів можна прочитати в давнішому матеріалі, смачного.

Залишити відповідь