Під час огляду елемента за допомогою devtools Chrome на вкладці елементів праворуч на панелі "Стилі" відображаються відповідні властивості CSS. Часом деякі з цих властивостей вражаються. Що означають ці властивості?
Відповіді:
Коли властивість CSS відображається як проривна, це означає, що стиль перекресленого був застосований, але потім замінений більш конкретним селектором, більш локальним правилом або пізнішою властивістю в межах того ж правила.
(Особливі випадки: стиль також буде показаний як проривчастий, якщо стиль існує у правилі відповідності, але його прокоментують, або якщо ви вручну відключили його, знявши його в інструментах для розробників Chrome. Він також відображатиметься як перекреслений з, але зі значком помилки, якщо у стилі є синтаксична помилка.)
Наприклад, якщо колір фону застосовано до всіх divs, але інший колір фону застосовано до divs з певним ідентифікатором, перший колір з’явиться, але буде перекреслений, оскільки другий колір його замінив (у властивості список для divцього ідентифікатора).
border-colorпросто введіть border-colorу фільтр. На ньому будуть показані всі правила, що містять цю властивість, при цьому властивість буде виділено жовтим кольором. Ця функція також доступна в Firefox.
!importantякий його перезаписав.
На бічній записці. Якщо ви використовуєте @media- запити (такі як @media screen (max-width:500px)), зверніть особливу увагу на застосування @media-запиту ПІСЛЯ ви закінчите з нормальними стилями. Тому що @media запит буде перекреслено (навіть якщо він є більш конкретним), якщо за ним слід css, який маніпулює тими ж елементами. Приклад:
@media (max-width:750px){
#buy-box {width: 300px;}
}
#buy-box{
width:500px;
}
** width will be 500px and 300px will be crossed out in Developer Tools. **
#buy-box{
width:500px;
}
@media (max-width:750px){
#buy-box {width: 300px;}
}
** width will be 300px and 500px will be crossed out **
На додаток до вищезазначеної відповіді я також хочу висвітлити випадок викресленого майна, яке мене дійсно здивувало.
Якщо ви додаєте фонове зображення в div:
<div class = "myBackground">
</div>
Ви хочете масштабувати зображення так, щоб воно відповідало розмірам div, щоб це було вашим звичайним визначенням класу.
.myBackground {
height:100px;
width:100px;
background: url("/img/bck/myImage.jpg") no-repeat;
background-size: contain;
}
але якщо ви міняєте замовлення таким чином:
.myBackground {
height:100px;
width:100px;
background-size: contain; //before the background
background: url("/img/bck/myImage.jpg") no-repeat;
}
то в хромі ви побачите розмір фону як викреслений. Я не впевнений, чому це, але так, ти не хочеш з цим возитися.
Якщо ви хочете застосувати стиль навіть після отримання вказівки прокреслення, ви можете використовувати його "!important"для застосування стилю. Це може бути не правильним рішенням, але вирішити проблему.
Бувають випадки, коли ви копіюєте і вставляєте код CSS кудись, і він порушує формат, щоб Chrome відображав жовте попередження. Спробуйте спробувати переформатувати код CSS ще раз, і він повинен бути добре.