사용자 에이전트 스타일 시트 란 무엇입니까?

499

Chrome의 웹 페이지에서 작업하고 있습니다. 다음 스타일로 올바르게 표시됩니다.

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

이 스타일을 정의하지 않았다는 점에 유의해야합니다. Chrome 개발자 도구에서는 CSS 파일 이름 대신 사용자 에이전트 스타일 시트가 표시 됩니다.

양식을 제출하고 일부 유효성 검사 오류가 발생하면 다음 스타일 시트가 표시됩니다.

table {
    white-space: normal;
    line-height: normal;
    font-weight: normal;
    font-size: medium;
    font-variant: normal;
    font-style: normal;
    color: -webkit-text;
    text-align: -webkit-auto;
}

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

font-size이 새로운 스타일에서 내 디자인을 방해한다. 스타일 시트를 강제로 작성하고 가능한 경우 Chrome의 기본 스타일 시트를 완전히 덮어 쓰는 방법이 있습니까?

css  google-chrome 
— 카필 샤르마
소스
2
— givanse
7
또한 Chrome (51)에서는 doctype 선언이없는 경우 두 테이블 항목 만 가져옵니다. 그렇지 않으면 두 번째 것만 얻습니다.
— John
더 많은 도구에서 크롬 캐시 지우기-> 인터넷 사용 기록 삭제
— doford
2
관련 게시물 here . 사용자 에이전트 (또는 브라우저) 스타일 시트가 사용자와 어떻게 다른지 이해하면 작성자 스타일 시트가 사물을 쉽게 개념화하는 데 도움이됩니다.
— RBT

답변:

251

대상 브라우저는 무엇입니까? 브라우저마다 다른 기본 CSS 규칙을 설정합니다. meyerweb CSS reset 또는 normalize.css 와 같은 CSS 재설정을 포함시켜 기본값을 제거하십시오. 차이점을 보려면 Google "CSS 재설정 대 정규화"를 참조하십시오.

— 올리버 밀링 턴
소스
19
브라우저마다 "거의"레벨 필드를 가지도록 모든 프로젝트 전에 항상 CSS를 재설정 / 정규화합니다. 그런 부정적인 부작용에 대해 들어 본 적이 없습니다. Google을 빠르게 살펴보면 추천 할 것입니다.
— Oliver Millington
2
스타일을 재설정하면 양식 필드, 특히 필드 테두리 또는 type = "file"과 같은 여러 부분으로 구성된 요소에 이상한 결과가 발생할 수 있습니다.
— 모드를 잘 치료하십시오.
7
재설정 / 정규화가 도움이 될 수 있지만 실제로 사용자 에이전트 스타일 시트가 변경되는 이유에 대한 질문에 대답하지는 않습니까? SEO에 사용하는 사전 렌더링 된 페이지에서 UA 스타일이 달라지는 동일한 문제가 있습니다. 왜 바뀌는 지에 대한 아이디어가 있습니까?
— Yaron
5
Chrome에서 기본적으로 웹 페이지로 설정 한 내용을 확인하세요. trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
— Santosh Kumar
10
이것은 대답이 아닙니다 ... 추가 <!DOCTYPE>는 @Sebas에 의해 올바른 것입니다
— Amit Shah
140

<!DOCTYPE>HTML 컨텐츠에 누락 된 경우 브라우저가 사용자 정의 스타일 시트보다 "사용자 에이전트 스타일 시트"를 선호하는 것을 경험할 수 있습니다. doctype을 추가하면이 문제가 해결됩니다.

— 제스퍼 미 긴드
소스
6
좋은 힌트입니다. 당신은 나에게 조사 시간을 절약했다. 내 경우에는 그 doctype 선언이 있었지만 이전에는 스크립트가있었습니다. DOCTYPE이 페이지에서 가장 먼저 발생해야하는 것처럼 보입니다.
— Sebas
3
<! DOCTYPE>을 추가하면 매우 이상한 tr / td 수직 정렬 문제가 해결되었습니다. 이 답변에 감사드립니다.
— 랄프 티
3
이것은 nitpicking이지만 <! DOCTYPE html>은 문제를 해결했습니다.
— Steve Zelaznik
8
<! DOCTYPE html>을 사용하도록 설정했지만 여전히 정상화해야했습니다.
— antikbd
1
@ChrisMorgan은 귀하가 링크 한 사양에서 인용합니다. "DOCTYPE은 레거시 이유로 필요합니다. 생략하면 브라우저는 일부 사양과 호환되지 않는 다른 렌더링 모드를 사용하는 경향이 있습니다. 문서에 DOCTYPE을 포함하면 브라우저가 관련 사양을 따르는 최선의 노력 ". 이상적인 세계에서는 DOCTYPE이 필요하지 않습니다. 그러나 그 대답이 "진실하지 않다"고 주장하는 것은 특히 대변인의 수를 고려할 때 대담한 IMHO입니다.
— Jesper Mygind '
104

"사용자 에이전트 스타일 시트"개념에 대해서는 CSS 2.1 스펙의 Cascade 섹션을 참조하십시오 .

사용자 에이전트 스타일 시트는 사용자가 자신의 스타일 시트에서 설정 한 것으로 대체됩니다. 그들은 단지 최저 있습니다 : 페이지 또는 사용자가 제공하는 스타일 시트가 없을 경우, 브라우저는 여전히 콘텐츠를 렌더링하는 어떻게 든 , 사용자 에이전트 스타일 시트는이에 대해 설명합니다.

따라서 사용자 에이전트 스타일 시트에 문제가 있다고 생각되면 마크 업이나 스타일 시트 또는 둘 다 (아무 것도 쓰지 않은)에 문제가있는 것입니다.

— Jukka K. Korpela
소스
@givanse, 아니요, 사용자 에이전트 스타일 시트 효과를 무시하지 않으면 사용자가 볼 수 있으며 샘플 마크 업도 예외는 아닙니다. 텍스트 내용 만 li있는 두 ul요소를 포함하는 하나의 요소 로 구문 분석됩니다 . 이들은 사용자 에이전트 스타일 시트로 스타일이 지정되지만이 스타일은 대체 할 수 있습니다. 마크 업이 유효하지 않은지 여부는 컨텍스트 및 HTML 버전에 따라 다르지만 스타일링에는 영향을 미치지 않습니다.
— Jukka K. Korpela
@ givanse, 그 문제는“사용자 스타일 시트 란 무엇인가”라는 질문과 관련이 없습니다. 문제가 중요하다고 생각되면 자세한 내용과 함께 새 질문으로 게시하십시오. 그러나 jsfiddle의 글 머리 기호는 li요소 의 글 머리 기호이며 스타일 시트는이를 대체하지 않습니다.
— Jukka K. Korpela
47

첫 번째 줄에 적절한 문서 유형으로 문서를 HTML5로 표시하면 문제가 해결되었습니다.

<!DOCTYPE html>
<html>...
— 다니엘
소스
8
정확히 어떻게 작동해야하는지 설명해 주시겠습니까? HTML 5가 정의되지 않은 스타일과 어떻게 관련되어 있습니까? 확인하지만 확인을 위해 준비된 바이올린이 있습니까?
— Kapil Sharma
28

사용자 에이전트 스타일 시트는 "일반적인 프리젠 테이션 기대"를 만족시키는 방식으로 페이지를 표시하기 위해 브라우저 (예 : Chrome, Firefox, Edge 등)가 제공하는 "기본 스타일 시트"입니다. 예를 들어, 기본 스타일 시트는 글꼴 크기, 테두리 및 요소 간 간격과 같은 기본 스타일을 제공합니다. 브라우저 간의 불일치를 처리하기 위해 재설정 스타일 시트 를 사용하는 것이 일반적 입니다.

사양에서 ...

사용자 에이전트의 기본 스타일 시트는 문서 언어에 대한 일반적인 프리젠 테이션 기대를 충족시키는 방식으로 문서 언어 요소를 제공해야합니다. ~ 캐스케이드 .

일반적으로 사용자 에이전트에 대한 자세한 내용은 사용자 에이전트 .

— 케네스 스토 다드
소스
15

질문에 제목, 사용자 에이전트 스타일 시트, 브라우저의 기본 스타일 세트에 대한 답변이 있습니다. 다음은 그 중 일부 (오늘날 웹에서도 가장 관련성이 높은 스타일)입니다.

개인적인 의견 : 그들과 싸우지 마십시오. 예를 들어 rtl / bidi의 경우 기본값이 양호하며 현재는 일관됩니다. 한 번에 모든 것이 아니라 관련성이없는 것을 재설정하십시오.

— 에브라힘 비아 고위
소스
12

자신의 CSS 컨텐츠에서 Chrome의 사용자 에이전트 스타일에서 사용하지 않으려는 값을 정의하십시오.

— 벤
소스
4

일부 브라우저는 자체 방식으로 .css 파일을 읽습니다. 따라서 이것을 극복하는 올바른 방법 : .html 소스 코드에 명령 줄을 직접 입력하면 .css 파일을 능가합니다. 그러면 브라우저가 직접해야 할 작업을 지시하고 브라우저는 읽을 수 없습니다. .css 파일의 명령 .html 파일에 작성된 명령은 .css의 명령보다 강력합니다.

— rollin_jeksun
소스
1

내 <div> 중 하나가 브라우저에서 설정 한 여백과 동일한 문제가있었습니다. 꽤 성가신 일 이었지만 대부분의 사람들이 말했듯이 마크 업 오류라고 생각했습니다.

돌아가서 <head> 섹션을 확인했으며 CSS 링크는 다음과 같습니다.

<link rel="stylesheet" href="ex.css">

나는 그것을 포함 type시키고 아래와 같이 만들었다.

<link rel="stylesheet" type="text/css" href="ex.css">

내 문제가 해결되었습니다.

— 아피 샤르마
소스
0

HTML 파일이 지정하지 않은 경우 각 브라우저는 사용자 에이전트 스타일 시트라는 기본 스타일 시트를 제공합니다. 지정한 스타일이 기본값보다 우선합니다.

테이블 요소 상자에 값을 지정하지 않았으므로 기본 스타일이 적용되었습니다.

— firstpostcommenter
소스
0

방금 내가 읽은 것을 기반으로 @BenM의 응답을 확장하고 싶었 습니다. Ire Aderinokun에서 습니다. 사용자 에이전트 스타일 시트는 유용한 기본 스타일을 제공하므로이를 재정의하기 전에 두 번 생각하십시오.

Chrome에서 버튼 요소가 올바르게 보이지 않는 바보 같은 오류가 발생했습니다. 전통적인 버튼처럼 보이지 않기 때문에 부분적으로 스타일을 지정했습니다. 그러나 테두리, 테두리 색상 등과 같은 스타일 요소를 제외했습니다. 그래서 Chrome에서 누락 된 것으로 생각되는 부분을 공급하기 시작했습니다.

와 같은 스타일을 추가하면 문제가 사라졌습니다 border: none.

따라서 다른 사람이이 문제를 겪고 있다면 특히 사용자 에이전트 스타일을 완전히 재설정하지 않으려는 경우 요소에 눈에 띄는 경우 요소에 적용 가능한 모든 기본 사용자 에이전트 스타일을 명시 적으로 재정의해야합니다. 그것은 나를 위해 일했다.

— 브렌트 밀러
소스
이것이 답변이 아닌 주석이 아니어야합니까?
— Peter Mortensen
@PeterMortensen 예,하지만 의견을 남길 수는 없습니다-평판이 충분하지 않습니다.
— 브렌트 밀러
-1

해결책이 있습니다. 이것을 확인하십시오 :

오류

<link href="assets/css/bootstrap.min.css" rel="text/css" type="stylesheet">

옳은 

<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
— 빈칼 찬델
소스
2
이것이 어떻게 작동하고 왜 도움이되는지 설명하기 위해 편집하십시오.
— Yunnosch
-6

CSS 파일에 다음 코드를 넣으십시오.

table {
    font-size: inherit;
}
— 스리 칸트
소스
2
이 게시물에 실제로 새로운 내용이 추가되지는 않습니다. 이미 수락 된 답변과 5 개의 다른 답변이 있으므로 늦은 답변을 게시하지 마십시오.
— 카스파 리
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.