HTML 요소에 대한 브라우저의 기본 CSS
HTML 요소에 대한 브라우저의 기본 CSS는 어디에서 찾을 수 있습니까?
많은 HTML 요소에는 기본 CSS 속성이 포함되어있어 때로는 알 수 없거나 원치 않는 동작이 발생할 수 있습니다. 예를 들어 입력 상자는 브라우저마다 다르게 표시됩니다. 새로운 CSS3 속성과 새로운 HTML5 요소를 다루는 곳을 찾고 있습니다.
CSS 재설정 솔루션을 제안하는 다른 (훨씬 오래된) 질문 (예 : 브라우저의 기본 CSS 스타일 시트 ) 답변 에서 보았습니다 . 이 솔루션은 때로는 원하지 않습니다. 종종 Chrome의 입력 상자 강조 표시와 같은 기본 속성 중 일부를 유지하고 싶습니다. 다시 말해 : 나는 그들이하는 일을 모르기 때문에 물건을 없애고 싶지 않습니다 .
그렇다면 이 모든 정보를 제공 할 수있는 사이트가 있습니까?
모든 W3C HTML 사양 및 공급 업체 기본 CSS 스타일 시트의 GitHub 저장소는 여기 에서 찾을 수 있습니다.
1. Firefox의 기본 스타일
2. Internet Explorer의 기본 스타일
3. Chrome / Webkit의 기본 스타일
4. 오페라의 기본 스타일
5. HTML4의 기본 스타일 (W3C 사양)
6. HTML5의 기본 스타일 (W3C 사양)
기본 W3C HTML4 사양에 따른 샘플 :
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block; unicode-bidi: embed }
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { margin: 8px }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address { font-style: italic }
pre, tt, code,
kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea,
input, select { display: inline-block }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle }
td, th, tr { vertical-align: inherit }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir,
menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "\A"; white-space: pre-line }
center { text-align: center }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
@media print {
h1 { page-break-before: always }
h1, h2, h3,
h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
}
브라우저마다 다르므로 다음과 같습니다.
- 파이어 폭스 (게코) : https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css . 또는를 찾아서
resource://gre-resources/보십시오html.css. - Chrome/Safari (WebKit): http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
- Internet Explorer (Trident), older versions: http://web.archive.org/web/20170122223926/http://www.iecss.com/
You can also look at the HTML5 Boilerplate stylesheet, which "normalizes the display of a lot of stuff without being a reset in the traditional sense". It also fixes quite a few bugs/inconsistencies.
It's also worth looking at: https://github.com/necolas/normalize.css/blob/master/normalize.css
While this is an old cross browser problem, as each browsers has his own rendering and behavior with some html elements like medias and inputs elements, we can now in 2017 use pretty safely the css filters proprety on top of them.
This allow to give a color palette with the hue-rotate filter that will render pretty well cross browsers.
The following snippets show a way to use a input type color to render this effect in realtime on a video element with javascript.
To use only css, this is mandatory to use each one of this filters: sepia not at 0, high saturation, grayscale at 0, high contrast, and then give a color with the hue-rotate property, following my tests. The invert filter isn't mandatory, but is giving some deep effects.
As well, the drop-shadow filter is working pretty nicely cross browser. To be use like this: filter:drop-shadow(2px 20px 50px red) [X,Y,RADIUS,COLOR]
function styloElem() {
stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
media.style.cssText += ";filter:sepia(100%) saturate(1000%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"
}
styloElem()body {
text-align:center;
background:#001;
color: white
}
video {
width:500px;max-width:500px
}Colors:
<input
type="color"
id="stylo"
oninput="styloElem()"
class="media"
data-hue="0" />
<br><br>
<video
controls
id="media"
onplay="this.removeAttribute('controls');this.style.all='unset'"
onpause="this.controls='controls';styloElem()"
src="https://ia600206.us.archive.org/7/items/MysteresDarchives-Saison04/1944%2c%20Dans%20le%20maquis%20du%20Vercors.ogv"></video>Can i use css filters:
http://caniuse.com/#feat=css-filters
A toolbar I made around css filters, from where are coming this notes:
https://github.com/webdev23/ponyFilters
A more complete codepen example:
http://codepen.io/Nico_KraZhtest/pen/bWExEB/
No one has mentioned any source for the CSS defaults in Edge. I looked, and I couldn't find anything authoritative, but I found this stylesheet that looks plausible: https://gist.github.com/jonathantneal/abc52743caa0a019d359ec4ba2ce965b
참고URL : https://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements
'Programing' 카테고리의 다른 글
| 녹아웃 JS가있는 TypeScript (0) | 2020.06.24 |
|---|---|
| C에서 열거 형의 크기는 얼마입니까? (0) | 2020.06.24 |
| if / while 오류 (조건) {: TRUE / FALSE가 필요한 값이 없음 (0) | 2020.06.24 |
| Xcode 9.3에서 생성 된 새 파일 (0) | 2020.06.24 |
| Ruby gem 의존성에서 ~보다 큰 물결표 (~>)는 무엇을 의미합니까? (0) | 2020.06.24 |