多久沒聽到 CSS Reset了？是時候更新了!

家好，很高興又見面了，我是"高級前端?進階?"，由我帶著大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發，您的支持是我不斷創作的動力。

本篇文章內容來自 Andy Bell ，其大約 4 年前寫了一篇文章《現代 CSS Reset》，但是其并沒有過時，本篇文章就是在其基礎上更新的內容。

新 CSS Reset 調整

box-sizing

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

這條規則非常容易理解，其將所有元素和偽元素設置為使用 border-box 而不是默認的 content-box 來調整大小。

現在更多地關注讓瀏覽器通過具有流體類型（fluid type）和空間的靈活布局來完成更多工作，這條規則雖然不再像以前那么有用。但是，項目還是建議有明確的 box-sizing 設置，因此它仍然在 Reset 中占有一席之地。

html reset

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

這條規則最好的解釋者是 Kilian，他還解釋了為什么需要丑陋的前綴，可以閱讀文章《Your CSS reset needs text-size-adjust (probably)》。

margin reset

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin: 0;
}

上面的 reset 規則傾向于剝離用戶代理樣式以獲得邊距，從而支持在更宏觀層面上定義流程和空間。通過邏輯屬性刪除末端邊距（end margin），而不是舊重置中的所有邊。

列表 reset

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

Safari 有一些奇怪的表現，包括：如果刪除列表樣式，Safari 就會刪除 VoiceOver 的語義。有人認為這是一個功能，也有人認為這是一個錯誤，但是依然建議對其進行處理。

body reset

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

大多數開發者喜歡繼承的清晰易讀的行高，比如將 body 的最小高度設置為 100vh 也非常方便，特別是當開發者想要設置裝飾元素時。雖然使用像 dvh 的新單位可能比較吸引人，但是也可能引入一些奇怪的表現，這不是 CSS Reset 得職責所在。

而且，svh 單位似乎比 dvh 好，但大多數開發者還是會傾向于使用 vh 。最后提醒一下，在深入研究新單位之前，請務必確保了解它們。

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

就像在全局范圍內擁有較大的行高一樣，為標題和按鈕等設置小的行高也同樣方便。如果頁面字體具有較大的上升部分和下降部分（ascenders and descenders though），那么刪除或修改此規則絕對值得，可以有效避免內容相互沖突造成的可訪問性問題。

text-wrap Reset

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

這條規則取決于特定的項目、開發者本身，但是新的文本換行 text-wrap 屬性使標題看起來非常漂亮。

currentColor 繼承

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

這條規則首先確保文本裝飾（text decoration）不會干擾上升部分和下降部分。這條規則目前在主流瀏覽器中基本上是默認的，但設置它是一個很好的保險策略。

很多開發者喜歡默認設置鏈接來繼承文本的當前顏色（currentColor），但如果不希望這樣做，可以刪除該規則。

font:inherit 設置

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

font:inherit 對于 input 和其他表單元素來說是非常有用的。其主要會影響 <textarea> 元素，但將其應用于其他表單元素也沒有什么壞處，因為它可以在項目中節省一些 CSS。

textarea reset

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em
}

對于 <textarea> 元素，該規則很方便。默認情況下，如果不添加行屬性，textarea 可能會非常小。這對于粗指針（例如手指）并不理想，并且通過代理， <textarea> 元素往往用于多行文本。

元素錨定 Reset

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

如果一個元素被錨定，那么使用滾動邊距在其上方添加更多空間是有意義的，只有當該元素被定位時才會考慮這一點。以上一點點代碼調整就能帶來更好的用戶體驗！當然如果有固定標題，可能需要調整此設置。

完整的 CSS Reset

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

參考資料

https://andy-bell.co.uk/a-more-modern-css-reset/

https://dev.to/ziratsu/css-reset-58h9

https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/

嘍呀大家好呀，淼淼又來和大家見面啦，這一期淼淼要和大家分享游戲額有關瀏覽器兼容性的問題，解決瀏覽器兼容性問題通常涉及多種策略和技術，以下是一些通用的解決方案：

使用主流瀏覽器并保持更新： 主流瀏覽器如Chrome、Firefox、Safari和Microsoft Edge等，通常對最新的網頁標準支持得比較好，并且會不斷更新以適應新技術。確保你和你的用戶使用的瀏覽器都是最新版本，可以減少很多兼容性問題。

利用瀏覽器的兼容性視圖或模式：

對于Microsoft Edge，你可以更改兼容性視圖設置或使用IE模式來瀏覽那些僅兼容舊版Internet Explorer的網站。

其他瀏覽器如Chrome可通過安裝特定的擴展程序（如IE Tab Multi）來模擬其他瀏覽器的渲染引擎。

優化網頁代碼：

遵循W3C標準編寫HTML、CSS和JavaScript代碼，避免使用非標準或已廢棄的特性。

使用CSS前綴(-webkit-, -moz-, -ms-)來確保CSS樣式在不同瀏覽器中的兼容性。

應用CSS Reset或Normalize.css來消除瀏覽器之間的默認樣式差異。

使用跨瀏覽器兼容的前端框架和庫，如Bootstrap或jQuery，它們已經處理了很多常見的兼容性問題。

實施CSS Hack或條件注釋：

在特定情況下，可能需要使用CSS Hack來針對不同瀏覽器編寫特定的樣式代碼。盡管這不是最佳實踐，但在某些特殊場景下可能有用。

對于舊版IE，可以使用條件注釋來加載特定的樣式或腳本。

使用跨瀏覽器測試工具：

利用工具如BrowserStack、Selenium等進行自動化和手動的跨瀏覽器測試，確保網頁在各種瀏覽器和版本中都能正確顯示和功能正常。

持續監控和用戶反饋：

建立一個機制來收集用戶關于瀏覽器兼容性問題的反饋，并及時響應和修復。

定期使用兼容性檢測工具（如Can I Use）檢查你的代碼依賴的特性在各瀏覽器中的支持情況。

禁用硬件加速：

如果發現某些渲染問題是由于硬件加速引起，可以嘗試在瀏覽器設置中禁用這一功能。

綜合運用上述方法，可以有效地減少甚至解決瀏覽器兼容性問題，提升網站的用戶體驗。

淼淼這一期的內容就講到這里啦！大家有不同的想法和意見可以在評論區留言奧

SS Reset是指樣式重置，主要用于清除瀏覽器里面的默認樣式，有利于頁面布局。以下總結了一些常見網站使用的默認樣式，供大家參考。

淘寶

html {
overflow-x:auto;
overflow-y:scroll;
}
body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td {
font-weight:400;
margin:0;
padding:0;
}
h1, h2, h3, h4, h4, h5 {
margin:0;
padding:0;
}
body {
background-color:#FFFFFF;
color:#666666;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
padding:0 10px;
text-align:left;
}
select {
font-size:12px;
}
table {
border-collapse:collapse;
}
fieldset, img {
border:0 none;
}
fieldset {
margin:0;
padding:0;
}
fieldset p {
margin:0;
padding:0 0 0 8px;
}
legend {
display:none;
}
address, caption, em, strong, th, i {
font-style:normal;
font-weight:400;
}
table caption {
margin-left:-1px;
}
hr {
border-bottom:1px solid #FFFFFF;
border-top:1px solid #E4E4E4;
border-width:1px 0;
clear:both;
height:2px;
margin:5px 0;
overflow:hidden;
}
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
caption, th {
text-align:left;
}
q:before, q:after, blockquote:before, blockquote:after {
content:””;
}

騰訊

body,ol,ul,h 1 ,h 2 ,h 3 ,h 4 ,h 5 ,h 6 ,p,th,td,dl,dd,form,fieldset,legend,input,textarea,
select{ 
margin:0; 
padding:0 
}
body{ 
font : 12px "宋體" , "Arial Narrow" ,HELVETICA; 
background:#fff;
-webkit-text-size-adjust: 100% 
}
a{ 
color : #172c45; 
text-decoration:none 
}
a:hover{ 
color : #cd0200; 
text-decoration:underline 
}
em{ 
font-style:normal 
}
li{ 
list-style:none 
}
img{ 
border:0 ; 
vertical-align:middle 
}
table{ 
border-collapse:collapse ; 
border-spacing:0 }
p{word-wrap:break-word}

百度

body {
font-family:arial,helvetica,sans-serif;
font-size:13px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.4;
text-align:center;
}
body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
table {
font-size:inherit;
}
input, select {
font-family:arial,helvetica,clean,sans-serif;
font-size:100%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
button {
overflow:visible;
}
th, em, strong, b, address, cite {
font-style:normal;
font-weight:normal;
}
li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
img, fieldset {
border:0 none;
}
ins {
text-decoration:none;
}

新浪

html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img {
    margin: 0;
    padding: 0
}
fieldset,img {
    border: 0
}
img {
    display: block
}
address,caption,cite,code,dfn,th,var {
    font-style: normal;
    font-weight: normal
}
ul,ol {
    list-style: none
}
input {
    padding-top: 0;
    padding-bottom: 0;
    font-family: "SimSun","宋體"
}
input::-moz-focus-inner {
    border: 0;
    padding: 0
}
select,input {
    vertical-align: middle
}
select,input,textarea {
    font-size: 12px;
    margin: 0
}
input[type="text"],input[type="password"],textarea {
    outline-style: none;
    -webkit-appearance: none
}
textarea {
    resize: none
}
table {
    border-collapse: collapse
}

京東

* {
    margin: 0;
    padding: 0
}
em,i {
    font-style: normal
}
li {
    list-style: none
}
img {
    border: 0;
    vertical-align: middle
}
button {
    cursor: pointer
}
a {
    color: #666;
    text-decoration: none
}
a:hover {
    color: #c81623
}

大眾版

在線咨詢

上一篇：如何快速寫出表格代碼？exl表格轉換成html代碼
下一篇：10個對web開發人員有用的HTML文件上傳技巧

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商