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

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 규칙을 설정합니다. meyerweb CSS reset 또는 normalize.css 와 같은 CSS 재설정을 포함시켜 기본값을 제거하십시오. 차이점을 보려면 Google “CSS 재설정 대 정규화”를 참조하십시오.


답변

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


답변

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

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

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


답변

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

<!DOCTYPE html>
<html>...


답변

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

사양에서 …

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

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


답변

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

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


답변

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