나는 이것이 이전에 언급 / 요청되었지만 운이없는 나이를 찾고 있다고 확신합니다. 내 용어는 잘못되었습니다!
나는 얼마 전에 내가 본 특정 스타일에 대해 스타일 시트에 설정된 모든 스타일을 제거하는 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는 spec에 정의 된대로 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;
}
}@ user566245의 의견에서 언급했듯이 :
이것은 원칙적으로 정확하지만 개인 마일리지는 다를 수 있습니다. 예를 들어, 텍스트 영역과 같은 특정 요소에는 기본적으로 테두리가 있으며이 재설정을 적용하면 해당 텍스트 영역의 테두리가 줄어 듭니다.
[POST EDIT FEB 4, ’17] 사용자 표준 Joost
#reset-this-parent {
all: initial;
* {
all: unset;
}
}W3의 예
예를 들어, 작성자가 요소에 initial : all을 지정하면 캐스케이드의 작성자, 사용자 또는 사용자 에이전트 레벨에 규칙이없는 것처럼 모든 상속을 차단하고 모든 특성을 재설정합니다.
이것은 외부 페이지의 스타일을 상속하지 않으려는 페이지에 포함 된 “위젯”의 루트 요소에 유용 할 수 있습니다. 그러나 해당 요소에 적용되는 모든 “기본”스타일 (예 :와 같은 블록 요소의 UA 스타일 시트에서 표시 : 블록)도 사라집니다.
자바 스크립트?
아무도 CSS를 재설정하기 위해 CSS 이외의 것에 대해 생각하지 않았습니까? 예?
스니핑은 완전히 관련이 있습니다 : https : //.com/a/14791113/845310
getElementsByTagName ( “*”)은 DOM에서 모든 요소를 반환합니다. 그런 다음 컬렉션의 각 요소에 스타일을 설정할 수 있습니다.
생성 9 feb. 132013-02-09 20:15:06 VisioN
var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
var element = allElements[i];
// element.style.border = ...
}이 모든 말로; 우리가 하나의 웹 브라우저로 끝나지 않는 한 CSS 재설정이 실현 가능한 것으로 생각하지 않습니다. ‘기본’이 결국 브라우저에 의해 설정된 경우.
비교를 위해, 여기에 대한 파이어 폭스 40.0 값 목록입니다
<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에서 :
revert 키워드는 많은 경우 설정되지 않은 것과 정확히 동일하게 작동합니다. 유일한 차이점은 브라우저 또는 사용자가 만든 사용자 정의 스타일 시트 (브라우저 쪽에서 설정)에서 값을 설정 한 속성의 경우입니다.
“특정 요소에 대해 스타일 시트에서 이전에 설정 한 스타일을 제거하는 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 값을 사용했습니다.
revert실제로
revert이름에서 알 수 있듯이 해당 속성을 해당 사용자 또는 사용자 에이전트 스타일로 되돌립니다.
all그리고 속성
revert과 함께 사용all하면 해당 요소에 적용된 모든 CSS 속성이 사용자 / 사용자 에이전트 스타일로 되돌아갑니다.
작성자, 사용자, 사용자 에이전트 스타일의 차이점을 보려면 여기를 클릭하십시오.
예를 들어 임베디드 위젯 / 컴포넌트를 포함하는 페이지의 스타일에서 포함 된 위젯 / 컴포넌트 를 분리하려면 다음과 같이 작성할 수 있습니다.
.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 사양에 대해 책임이 있다면 지난 10 년간 솔직히 말해서이 문제를 해결하지 못한 것에 대해 당황 스러웠습니다.
문제
HTML 문서에 마크 업을 삽입해야하며 특정 방식으로 표시되어야합니다. 또한이 문서를 소유하지 않으므로 기존 스타일 규칙을 변경할 수 없습니다. 스타일 시트 가 무엇인지, 또는 스타일 시트 가 무엇으로 바뀔 수 있는지 모릅니다.
사용 사례는 알 수없는 타사 웹 사이트에서 사용할 표시 가능한 구성 요소를 제공하는 경우입니다. 이에 대한 예는 다음과 같습니다.
- 광고 태그
- 컨텐츠를 삽입하는 브라우저 확장 프로그램 빌드
- 모든 유형의 위젯
가장 간단한 수정
모든 것을 iframe에 넣습니다. 여기에는 자체 제한 사항이 있습니다.
- 도메인 간 제한 : 콘텐츠가 원본 문서에 전혀 액세스 할 수 없습니다. 콘텐츠를 오버레이하거나 DOM을 수정할 수 없습니다.
- 표시 제한 : 내용이 사각형 안에 잠겨 있습니다.
컨텐츠 가 상자에 들어갈 수 있다면 컨텐츠 가 iframe을 작성하고 컨텐츠를 명시 적으로 설정하여 iframe과 문서가 동일한 도메인을 공유하므로 문제를 해결함으로써 문제 1을 해결할 수 있습니다.
CSS 솔루션
나는 이것에 대한 해결책을 찾기 위해 광범위하게 검색했지만 불행히도 아무도 없습니다. 가장 좋은 방법은 재정의 할 수있는 모든 속성을 명시 적으로 재정의 하고 기본값 을 생각 한대로 재정의하는 것입니다.
재정의하는 경우에도 보다 타겟이 지정된 CSS 규칙이 규칙을 재정의하지 않도록 할 수있는 방법이 없습니다 . 여기서 할 수있는 최선의 방법은 재정의 규칙을 가능한 한 구체적으로 대상으로 지정하고 부모 문서가 실수로 최선을 다하지 않기를 바랍니다. 콘텐츠의 부모 요소에 모호하거나 임의의 ID를 사용하고 모든 속성 값 정의에! important를 사용하십시오. .
답변
다른 방법 :
1) Yahoo CSS 재설정 의 CSS 코드 (파일)를 포함시킨 다음이 DIV에 모든 것을 넣으십시오.
<div class="yui3-cssreset">
<!-- Anything here would be reset-->
</div>2) 또는 사용
답변
여기에 올바른 것으로 표시된 답변을 사용하지 않는 것이 좋습니다. 모든 것을 다루려고 시도하는 CSS의 거대한 덩어리입니다.
사례별로 요소에서 스타일을 제거하는 방법을 평가하는 것이 좋습니다.
SEO 목적을 위해 디자인에 실제 제목이없는 페이지에 H1을 포함시켜야한다고 가정 해 봅시다. 해당 페이지의 탐색 링크를 H1로 만들 수는 있지만 해당 탐색 링크가 페이지에 거대한 H1으로 표시되는 것을 원하지는 않습니다.
당신이해야 할 일은 그 요소를 h1 태그에 싸서 검사하는 것입니다. h1 요소에 어떤 CSS 스타일이 적용되고 있는지 확인하십시오.
다음 스타일이 요소에 적용되는 것을 볼 수 있습니다.
//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';
}그런 다음 컨테이너에서 disable 클래스를 사용할 수 있으며 하위 콘텐츠에는 스타일이 없습니다.
<div class="disable-all-styles">
<p>Nothing in this div is affected by my sass styles.</p>
</div>물론 모든 스타일에 : not () 선택자가 앞에 붙어 있으므로 약간 애매하지만 잘 작동합니다.
