Скидання / видалення стилів CSS лише для елемента

Я впевнений, що про це, мабуть, згадували / запитували раніше, але шукали вік без везіння, моя термінологія повинна бути неправильною!

Я смутно пам'ятаю твіт, який я бачив деякий час тому, який припускав, що існує правило css, яке дозволяє видалити будь-які стилі, попередньо встановлені в таблиці стилів для певного елемента.

Хороший приклад використання може бути на веб-сайті RWD для мобільних пристроїв, де значна частина стилів, які використовуються для певного елемента в режимах перегляду невеликого екрана, потребує "скидання" або видалення того ж елемента в режимі перегляду робочого столу.

Правило css, яке може досягти чогось типу:

.element {
  all: none;
}

Приклад використання:

/* mobile first */
.element {
   margin: 0 10;
   transform: translate3d(0, 0, 0);
   z-index: 50;
   display: block;
   etc..
   etc..
}

@media only screen and (min-width: 980px) {
  .element {
    all: none;
  }
}

Таким чином, ми могли швидко видалити або відновити стиль, не заявляючи про кожен ресурс.

Має сенс?

Ключове слово CSS3 initialвстановлює властивість CSS3 на початкове значення, як визначено в специфікації . initialКлючове слово має широку підтримку браузера для сімей IE і Opera Mini за винятком.

Оскільки відсутність підтримки IE може спричинити проблему, ось деякі способи повернення деяких властивостей CSS до їх початкових значень:

.reset-this {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;
    backface-visibility : visible;
    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    background-image : none;
    background-origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;
    border : 0;
    border-style : none;
    border-width : medium;
    border-color : inherit;
    border-bottom : 0;
    border-bottom-color : inherit;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-style : none;
    border-bottom-width : medium;
    border-collapse : separate;
    border-image : none;
    border-left : 0;
    border-left-color : inherit;
    border-left-style : none;
    border-left-width : medium;
    border-radius : 0;
    border-right : 0;
    border-right-color : inherit;
    border-right-style : none;
    border-right-width : medium;
    border-spacing : 0;
    border-top : 0;
    border-top-color : inherit;
    border-top-left-radius : 0;
    border-top-right-radius : 0;
    border-top-style : none;
    border-top-width : medium;
    bottom : auto;
    box-shadow : none;
    box-sizing : content-box;
    caption-side : top;
    clear : none;
    clip : auto;
    color : inherit;
    columns : auto;
    column-count : auto;
    column-fill : balance;
    column-gap : normal;
    column-rule : medium none currentColor;
    column-rule-color : currentColor;
    column-rule-style : none;
    column-rule-width : none;
    column-span : 1;
    column-width : auto;
    content : normal;
    counter-increment : none;
    counter-reset : none;
    cursor : auto;
    direction : ltr;
    display : inline;
    empty-cells : show;
    float : none;
    font : normal;
    font-family : inherit;
    font-size : medium;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    height : auto;
    hyphens : none;
    left : auto;
    letter-spacing : normal;
    line-height : normal;
    list-style : none;
    list-style-image : none;
    list-style-position : outside;
    list-style-type : disc;
    margin : 0;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    max-height : none;
    max-width : none;
    min-height : 0;
    min-width : 0;
    opacity : 1;
    orphans : 0;
    outline : 0;
    outline-color : invert;
    outline-style : none;
    outline-width : medium;
    overflow : visible;
    overflow-x : visible;
    overflow-y : visible;
    padding : 0;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    perspective : none;
    perspective-origin : 50% 50%;
    position : static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019';
    right : auto;
    tab-size : 8;
    table-layout : auto;
    text-align : inherit;
    text-align-last : auto;
    text-decoration : none;
    text-decoration-color : inherit;
    text-decoration-line : none;
    text-decoration-style : solid;
    text-indent : 0;
    text-shadow : none;
    text-transform : none;
    top : auto;
    transform : none;
    transform-style : flat;
    transition : none;
    transition-delay : 0s;
    transition-duration : 0s;
    transition-property : none;
    transition-timing-function : ease;
    unicode-bidi : normal;
    vertical-align : baseline;
    visibility : visible;
    white-space : normal;
    widows : 0;
    width : auto;
    word-spacing : normal;
    z-index : auto;
    /* basic modern patch */
    all: initial;
    all: unset;
}

/* basic modern patch */

#reset-this-root {
    all: initial;
    * {
        all: unset;
    }
}

• Relevent github repo з більш грунтовним списком грудня 2017 року
• Пов'язані
• Пов'язані з MDN
• Пов'язані технічні характеристики W3C

Як згадується в коментарі @ user566245:

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

[POST EDIT FEB 4, '17] Запропоновано стати сучасною нормою, користувач Joost

#reset-this-parent {
  all: initial;
  * {
    all: unset;
  }
}

ПРИКЛАД З W3

Наприклад, якщо автор вказує всі: початкові на елементі, він блокує всі успадкування та скидає всі властивості, так, як якщо б у каскадному рівні не з’явилося ніяких правил.

Це може бути корисно для кореневого елемента "віджета", який міститься на сторінці, який не бажає успадковувати стилі зовнішньої сторінки. Однак зауважте, що будь-який стиль "за замовчуванням", застосований до цього елемента (наприклад, наприклад, display: блок із аркуша стилю UA на таких блокових елементах), також буде видуто.

JAVASCRIPT?

Про скидання css ніхто не думав, крім css? Так?

Цей фрагмент повністю релевантний: https://stackoverflow.com/a/14791113/845310

getElementsByTagName ("*") поверне всі елементи з DOM. Тоді ви можете встановити стилі для кожного елемента колекції:

відповів 9 лютого '13 о 20:15 від VisioN

var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
    var element = allElements[i];
    // element.style.border = ...
}

З усього цього сказаного; Я не думаю, що скидання css є чимось здійсненним, якщо ми не закінчимось лише одним веб-браузером .. якщо врешті-решт браузер встановив браузер.

Для порівняння, ось список значень Firefox 40.0 для a, <blockquote style="all: unset;font-style: oblique">де font-style: obliqueзапускає роботу DOM.

align-content: unset;
align-items: unset;
align-self: unset;
animation: unset;
appearance: unset;
backface-visibility: unset;
background-blend-mode: unset;
background: unset;
binding: unset;
block-size: unset;
border-block-end: unset;
border-block-start: unset;
border-collapse: unset;
border-inline-end: unset;
border-inline-start: unset;
border-radius: unset;
border-spacing: unset;
border: unset;
bottom: unset;
box-align: unset;
box-decoration-break: unset;
box-direction: unset;
box-flex: unset;
box-ordinal-group: unset;
box-orient: unset;
box-pack: unset;
box-shadow: unset;
box-sizing: unset;
caption-side: unset;
clear: unset;
clip-path: unset;
clip-rule: unset;
clip: unset;
color-adjust: unset;
color-interpolation-filters: unset;
color-interpolation: unset;
color: unset;
column-fill: unset;
column-gap: unset;
column-rule: unset;
columns: unset;
content: unset;
control-character-visibility: unset;
counter-increment: unset;
counter-reset: unset;
cursor: unset;
display: unset;
dominant-baseline: unset;
empty-cells: unset;
fill-opacity: unset;
fill-rule: unset;
fill: unset;
filter: unset;
flex-flow: unset;
flex: unset;
float-edge: unset;
float: unset;
flood-color: unset;
flood-opacity: unset;
font-family: unset;
font-feature-settings: unset;
font-kerning: unset;
font-language-override: unset;
font-size-adjust: unset;
font-size: unset;
font-stretch: unset;
font-style: oblique;
font-synthesis: unset;
font-variant: unset;
font-weight: unset;
font: ;
force-broken-image-icon: unset;
height: unset;
hyphens: unset;
image-orientation: unset;
image-region: unset;
image-rendering: unset;
ime-mode: unset;
inline-size: unset;
isolation: unset;
justify-content: unset;
justify-items: unset;
justify-self: unset;
left: unset;
letter-spacing: unset;
lighting-color: unset;
line-height: unset;
list-style: unset;
margin-block-end: unset;
margin-block-start: unset;
margin-inline-end: unset;
margin-inline-start: unset;
margin: unset;
marker-offset: unset;
marker: unset;
mask-type: unset;
mask: unset;
max-block-size: unset;
max-height: unset;
max-inline-size: unset;
max-width: unset;
min-block-size: unset;
min-height: unset;
min-inline-size: unset;
min-width: unset;
mix-blend-mode: unset;
object-fit: unset;
object-position: unset;
offset-block-end: unset;
offset-block-start: unset;
offset-inline-end: unset;
offset-inline-start: unset;
opacity: unset;
order: unset;
orient: unset;
outline-offset: unset;
outline-radius: unset;
outline: unset;
overflow: unset;
padding-block-end: unset;
padding-block-start: unset;
padding-inline-end: unset;
padding-inline-start: unset;
padding: unset;
page-break-after: unset;
page-break-before: unset;
page-break-inside: unset;
paint-order: unset;
perspective-origin: unset;
perspective: unset;
pointer-events: unset;
position: unset;
quotes: unset;
resize: unset;
right: unset;
ruby-align: unset;
ruby-position: unset;
scroll-behavior: unset;
scroll-snap-coordinate: unset;
scroll-snap-destination: unset;
scroll-snap-points-x: unset;
scroll-snap-points-y: unset;
scroll-snap-type: unset;
shape-rendering: unset;
stack-sizing: unset;
stop-color: unset;
stop-opacity: unset;
stroke-dasharray: unset;
stroke-dashoffset: unset;
stroke-linecap: unset;
stroke-linejoin: unset;
stroke-miterlimit: unset;
stroke-opacity: unset;
stroke-width: unset;
stroke: unset;
tab-size: unset;
table-layout: unset;
text-align-last: unset;
text-align: unset;
text-anchor: unset;
text-combine-upright: unset;
text-decoration: unset;
text-emphasis-position: unset;
text-emphasis: unset;
text-indent: unset;
text-orientation: unset;
text-overflow: unset;
text-rendering: unset;
text-shadow: unset;
text-size-adjust: unset;
text-transform: unset;
top: unset;
transform-origin: unset;
transform-style: unset;
transform: unset;
transition: unset;
user-focus: unset;
user-input: unset;
user-modify: unset;
user-select: unset;
vector-effect: unset;
vertical-align: unset;
visibility: unset;
white-space: unset;
width: unset;
will-change: unset;
window-dragging: unset;
word-break: unset;
word-spacing: unset;
word-wrap: unset;
writing-mode: unset;
z-index: unset;

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

#someselector {
  all: initial;
  * {
    all: unset;
  }
}

• Підтримується в ( джерело ): Chrome 37, Firefox 27, IE 11, Opera 24
• Не підтримується: Safari

Існує зовсім нове рішення цієї проблеми.

Використовуйте all: revertабо all: unset.

Від MDN:

Ключове слово для повернення працює у багатьох випадках точно так само, як і у випадку незавершеного. Єдина відмінність полягає у властивостях, які мають значення, встановлені браузером, або користувацькі таблиці стилів, створені користувачами (встановлені на стороні браузера).

Вам потрібно "доступне правило css, яке видалить будь-які стилі, попередньо встановлені в таблиці стилів для певного елемента."

Отже, якщо елемент має ім’я класу типу remove-all-styles:

Наприклад:

HTML:

<div class="remove-all-styles other-classe another-class"> 
   <!-- content -->
   <p class="text-red other-some-styles"> My text </p>
</div>

За допомогою CSS:

  .remove-all-styles {
    all: revert;
  }

Скинемо всі стилі , що застосовуються other-class, another-classі всі інші успадкували і застосовані стилі до цього div.

Або у вашому випадку:

/* mobile first */
.element {
   margin: 0 10;
   transform: translate3d(0, 0, 0);
   z-index: 50;
   display: block;
   etc..
   etc..
}

@media only screen and (min-width: 980px) {
  .element {
    all: revert;
  }
}

Зроблю.

Тут ми використали одне цікаве властивість CSS з іншим класним значенням CSS.

1. revert

Насправді revert, як видно з назви, це властивість повертає його користувачеві або стилю користувача-агента.

2. all

І коли ми будемо використовувати revertз allвластивістю, всі властивості CSS, застосовані до цього елемента, будуть повернені до стилів user / user-agent.

Клацніть тут, щоб знати різницю стилів автора, користувача, користувача-агента.

Наприклад: якщо ми хочемо ізолювати вбудовані віджети / компоненти зі стилів сторінки, що їх містить , ми могли б написати:

.isolated-component {
 all: revert;
}

Що поверне всі author styles(наприклад, CSS для розробників) до user styles(стилів, які встановлює користувач нашого веб-сайту - менш вірогідний сценарій) або до user-agentсамих стилів, якщо не встановлені стилі користувачів.

Детальніше тут: https://developer.mozilla.org/en-US/docs/Web/CSS/revert

І лише питання полягає у підтримці : лише Safari 9.1 та iOS Safari 9.3 мають підтримкуrevert цінності на момент написання.

Тому я скажу, що використовуйте цей стиль та запасний варіант для будь-яких інших відповідей.

Дозвольте грунтовно відповісти на це запитання, оскільки це було джерелом болю для мене протягом кількох років, і дуже мало людей насправді розуміють проблему і чому важливо її вирішити. Якби я взагалі відповідав за специфікацію CSS, я був би збентежений, чесно кажучи, за те, що не звертався до цього за останнє десятиліття.

Проблема

Потрібно вставити розмітку в документ HTML, і він повинен виглядати певним чином. Крім того, у вас немає цього документа, тому ви не можете змінювати існуючі правила стилю. Ви не маєте уявлення про те, якими можуть бути таблиці стилів або що вони можуть змінити.

Для цього використовуються випадки, коли ви надаєте компонент, що відображається, для невідомих сторонніх веб-сайтів. Прикладами цього можуть бути:

1. Тег реклами
2. Побудова розширення для браузера, що вставляє вміст
3. Будь-який тип віджета

Найпростіша помилка

Покладіть все в рамку. У нього є власний набір обмежень:

1. Перехресні обмеження домену: ваш вміст взагалі не матиме доступу до оригінального документа. Ви не можете накладати вміст, змінювати DOM тощо.
2. Обмеження для показу: Ваш вміст заблоковано всередині прямокутника.

Якщо ваш вміст може вміститись у вікно, ви можете подолати проблему №1, запропонувавши вашому вмісту написати iframe та явно встановити вміст, таким чином, обертаючись навколо проблеми, оскільки кадр iframe та документ мають спільний домен.

CSS Рішення

Я шукаю далеко вирішення цього питання, але їх, на жаль, немає. Найкраще, що ви можете зробити, це явно переосмислити всі можливі властивості, які можна змінити, і замінити їх на те, що, на вашу думку, має бути їх значенням за замовчуванням.

Навіть коли ви переосмислюєте, немає жодного способу гарантувати, що більш націлене правило CSS не переможе ваше . Найкраще, що ви можете тут зробити, - це націлити свої правила переосмислення якомога конкретніше, і сподіваємось, що батьківський документ випадково не найкращий: використовуйте незрозумілий або випадковий ідентифікатор на батьківському елементі вмісту та використовуйте! Важливо для всіх визначень значення властивості .

інші способи:

1) включіть css-код (файл) Yahoo CSS скидання, а потім помістіть все до цього DIV:

<div class="yui3-cssreset">
    <!-- Anything here would be reset-->
</div>

2) або використовувати

• https://cssreset.com/scripts/vanilla-css-un-reset/
• https://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/
• https://cssreset.com/scripts/eric-meyer-reset-css/
• https://cssreset.com/scripts/tripoli-css-reset-david-hellsing/
• https://cssreset.com/scripts/normalize-css/

Я не рекомендую використовувати відповідь, яка тут позначена як правильна. Це величезна крапля CSS, яка намагається охопити все.

Я б запропонував вам оцінити, як видалити стиль з елемента на кожному випадку.

Скажімо, для цілей SEO вам потрібно включити H1 на сторінку, яка не має фактичного заголовка в дизайні. Можливо, ви хочете зробити навігаційне посилання цієї сторінки H1, але, звичайно, ви не хочете, щоб навігаційне посилання відображалося як гігантський H1 на сторінці.

Що потрібно зробити, це загортати цей елемент у тег h1 і перевіряти його. Подивіться, які стилі CSS застосовуються спеціально до елемента h1.

Скажімо, я бачу такі стилі, застосовані до елемента.

//bootstrap.min.css:1
h1 {
    font-size: 65px;
    font-family: 'rubikbold'!important;
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
}

//bootstrap.min.css:1
h1, .h1 {
    font-size: 36px;
}

//bootstrap.min.css:1
h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

//bootstrap.min.css:1
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

//bootstrap.min.css:1
h1 {
    margin: .67em 0;
    font-size: 2em;
}

//user agent stylesheet
h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

Тепер вам потрібно зафіксувати точний стиль, який застосовується до H1, і скасувати їх у класі css. Це виглядатиме приблизно так:

.no-style-h1 {
    font-size: unset !important;
    font-family: unset !important;
    font-weight: unset !important;
    font-style: unset !important;
    text-transform: unset !important;
    margin-top: unset !important;
    margin-bottom: unset !important;
    font-family: unset !important;
    line-height: unset !important;
    color: unset !important;
    margin: unset !important;
    display: unset !important;
    -webkit-margin-before: unset !important;
    -webkit-margin-after: unset !important;
    -webkit-margin-start: unset !important;
    -webkit-margin-end: unset !important;
}

Це набагато чистіше і не просто скидає випадковий фрагмент коду у ваш css, який ви не знаєте, що це насправді робить.

Тепер ви можете додати цей клас до своєї h1

<h1 class="no-style-h1">
     Title
</h1>

Якщо ви використовуєте sass в системі збирання, один із способів зробити це, який працюватиме у всіх основних браузерах, - це обернути весь імпорт стилю за допомогою селектора: not (), як ...

:not(.disable-all-styles) {
  @import 'my-sass-file';
  @import 'my-other-sass-file';
}

Тоді ви можете використовувати клас відключення на контейнері, і цей вміст не матиме жодного з ваших стилів.

<div class="disable-all-styles">
  <p>Nothing in this div is affected by my sass styles.</p>
</div>

Звичайно, всі ваші стилі тепер будуть претендувати на вибір: не (), тому він трохи нечіткий, але працює добре.

Ви згадали сайти для мобільних пристроїв ... Для чуйного дизайну, безумовно, можна змінити малоекранні стилі з великими екранами. Але вам, можливо, не потрібно.

Спробуйте це:

.thisClass {
    /* Rules for all window sizes. */
}

@media all and (max-width: 480px) {
    .thisClass {
        /* Rules for only small browser windows. */
    }
}

@media all and (min-width: 481px) and (max-width: 960px) {
    .thisClass {
        /* Rules for only medium browser windows. */
    }
}

@media all and (min-width: 961px) {
    .thisClass {
        /* Rules for only large browser windows. */
    }
}

Ці медіа-запити не перетинаються, тому їх правила не перекривають один одного. Це полегшує підтримку кожного набору стилів окремо.

ЛИШЕ РІШЕННЯ

Завантажте таблицю стилів "копіювати / вставити", щоб скинути властивості css до стандартних (стиль UA):
https://github.com/monmomo04/resetCss.git

Дякую @ Milche Patern!
Я справді шукав значення властивостей стилю скидання / за замовчуванням. Першою моєю спробою було скопіювати обчислене значення з інструмента «Dev» браузера елемента root (html). Але як було обчислено, це виглядало б / працювало по-різному в кожній системі.
Для тих, хто зіткнувся з збоєм у веб-переглядачі, намагаючись використати зірочку * для скидання стилю дитячих елементів, і, як я знав, що це не працює для вас, я замінив зірочку "*" на все ім'я HTML тегів . Браузер не вийшов з ладу; Я перебуваю на версії Chrome 46.0.2490.71 м.
Нарешті, добре згадати, що ці властивості відновлять стиль до типового стилю елемента топета root, але не до початкового значення для кожного елемента HTML. Отже, щоб виправити це, я взяв стилі "user-agent" веб-браузера на основі веб-програм і реалізував його під класом "reset-this".

Завантажте таблицю стилів "копіювати / вставити", щоб скинути властивості css до стандартних (стиль UA):
https://github.com/monmomo04/resetCss.git

Стиль користувача-агента:
Стандартний CSS для веб-переглядачів для елементів HTML
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Специфікація Css (зверніть увагу на специфічність):
https://css-tricks.com/specifics-on-css-specificity/

https://github.com/monmomo04/resetCss.git

У моєму конкретному сценарії я хотів пропустити застосування загальних стилів до певної частини сторінки, що краще проілюстровано так:

<body class='common-styles'>
    <div id='header'>Wants common styles</div>
    <div id='container'>Does NOT want common styles</div>
    <div id='footer'>Wants common styles</div>
</body>

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

$(function() {
    $('body').removeClass('common-styles');
    $('#header,#footer').addClass('common-styles');
});

(Тепер розкажіть, як зло використовувати JS для боротьби з CSS :-))

Для тих із вас, хто намагається зрозуміти, як насправді видалити стиль лише з елемента, не видаляючи css з файлів, це рішення працює з jquery:

$('.selector').removeAttr('style');

якщо ви встановите свій CSS в межах класів, ви можете легко їх видалити, використовуючи метод jQuery removeClass (). Нижче наведений код видаляє .element class:

    <div class="element">source</div>   
    <div class="destination">destination</div>
      <script>
        $(".element").removeClass();
      </script>

Якщо параметр не вказаний, цей метод видалить ВСІ назви класів із вибраних елементів.

Ні, це лише питання кращого управління структурою css.

У вашому випадку я замовив би моєму css щось подібне:

.element, .element1, .element2 p{z-index: 50; display: block}
.element, .element1{margin: 0 10}
.element2 p{transform: translate3d(0, 0, 0)}

@media only screen and (min-width: 980px) {
.element, .element1, .element2 p{display: none}
}

Просто експериментуйте.

Будь-який шанс ви шукаєте! Важливе правило? Це не скасовує всі декларації, але надає спосіб їх перекриття.

"Коли важливе правило використовується в оголошенні стилю, це декларація перекриває будь-яке інше оголошення, зроблене в CSS, де б воно не було в списку декларацій. Хоча,! Важливо не має нічого спільного з специфікою."

https://developer.mozilla.org/en-US/docs/CSS/Specificity#The_!important_exception