技術標籤：Web開發

文章目錄

• • • 1.什麼是瀏覽器預設樣式？
    • 2.如何獲取到對應的css？
    • 3.如何理解預設樣式？

1.什麼是瀏覽器預設樣式？

如圖所示，F12開發者工具中可以看到當前的樣式用到的CSS是什麼：user agent stylesheet

2.如何獲取到對應的css？

• Mozilla Firefox: https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css
• Google Chrome: https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
• Safari (WebKit): https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
• Internet Explorer: You can’t view Internet Explorer’s UA Stylesheet because it’s not open source.

3.如何理解預設樣式？

比如：

input元素的focus狀態：

/* focusable content: anything w/ tabindex >=0 is focusable */
:-moz-focusring {
  /* Don't specify the outline-color, we should always use initial value. */
 

   outline: 1px dotted;
}

iframe:-moz-focusring,
body:-moz-focusring,
html:-moz-focusring {
  /* These elements historically don't show outlines when focused by default.
   * We could consider changing that if needed. */
  outline-style: none;
}

待續。