多久沒(méi)聽(tīng)到 CSS Reset了？是時(shí)候更新了!

家好，很高興又見(jiàn)面了，我是"高級(jí)前端?進(jìn)階?"，由我?guī)е蠹乙黄痍P(guān)注前端前沿、深入前端底層技術(shù)，大家一起進(jìn)步，也歡迎大家關(guān)注、點(diǎn)贊、收藏、轉(zhuǎn)發(fā)，您的支持是我不斷創(chuàng)作的動(dòng)力。

本篇文章內(nèi)容來(lái)自 Andy Bell ，其大約 4 年前寫(xiě)了一篇文章《現(xiàn)代 CSS Reset》，但是其并沒(méi)有過(guò)時(shí)，本篇文章就是在其基礎(chǔ)上更新的內(nèi)容。

新 CSS Reset 調(diào)整

box-sizing

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

這條規(guī)則非常容易理解，其將所有元素和偽元素設(shè)置為使用 border-box 而不是默認(rèn)的 content-box 來(lái)調(diào)整大小。

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

html reset

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

這條規(guī)則最好的解釋者是 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 規(guī)則傾向于剝離用戶代理樣式以獲得邊距，從而支持在更宏觀層面上定義流程和空間。通過(guò)邏輯屬性刪除末端邊距（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 有一些奇怪的表現(xiàn)，包括：如果刪除列表樣式，Safari 就會(huì)刪除 VoiceOver 的語(yǔ)義。有人認(rèn)為這是一個(gè)功能，也有人認(rèn)為這是一個(gè)錯(cuò)誤，但是依然建議對(duì)其進(jìn)行處理。

body reset

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

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

而且，svh 單位似乎比 dvh 好，但大多數(shù)開(kāi)發(fā)者還是會(huì)傾向于使用 vh 。最后提醒一下，在深入研究新單位之前，請(qǐng)務(wù)必確保了解它們。

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

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

text-wrap Reset

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

這條規(guī)則取決于特定的項(xiàng)目、開(kāi)發(fā)者本身，但是新的文本換行 text-wrap 屬性使標(biāo)題看起來(lái)非常漂亮。

currentColor 繼承

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

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

很多開(kāi)發(fā)者喜歡默認(rèn)設(shè)置鏈接來(lái)繼承文本的當(dāng)前顏色（currentColor），但如果不希望這樣做，可以刪除該規(guī)則。

font:inherit 設(shè)置

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

font:inherit 對(duì)于 input 和其他表單元素來(lái)說(shuō)是非常有用的。其主要會(huì)影響 <textarea> 元素，但將其應(yīng)用于其他表單元素也沒(méi)有什么壞處，因?yàn)樗梢栽陧?xiàng)目中節(jié)省一些 CSS。

textarea reset

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

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

元素錨定 Reset

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

如果一個(gè)元素被錨定，那么使用滾動(dòng)邊距在其上方添加更多空間是有意義的，只有當(dāng)該元素被定位時(shí)才會(huì)考慮這一點(diǎn)。以上一點(diǎn)點(diǎn)代碼調(diào)整就能帶來(lái)更好的用戶體驗(yàn)！當(dāng)然如果有固定標(biāo)題，可能需要調(diào)整此設(shè)置。

完整的 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/

嘍呀大家好呀，淼淼又來(lái)和大家見(jiàn)面啦，這一期淼淼要和大家分享游戲額有關(guān)瀏覽器兼容性的問(wèn)題，解決瀏覽器兼容性問(wèn)題通常涉及多種策略和技術(shù)，以下是一些通用的解決方案：

使用主流瀏覽器并保持更新： 主流瀏覽器如Chrome、Firefox、Safari和Microsoft Edge等，通常對(duì)最新的網(wǎng)頁(yè)標(biāo)準(zhǔn)支持得比較好，并且會(huì)不斷更新以適應(yīng)新技術(shù)。確保你和你的用戶使用的瀏覽器都是最新版本，可以減少很多兼容性問(wèn)題。

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

對(duì)于Microsoft Edge，你可以更改兼容性視圖設(shè)置或使用IE模式來(lái)瀏覽那些僅兼容舊版Internet Explorer的網(wǎng)站。

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

優(yōu)化網(wǎng)頁(yè)代碼：

遵循W3C標(biāo)準(zhǔn)編寫(xiě)HTML、CSS和JavaScript代碼，避免使用非標(biāo)準(zhǔn)或已廢棄的特性。

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

應(yīng)用CSS Reset或Normalize.css來(lái)消除瀏覽器之間的默認(rèn)樣式差異。

使用跨瀏覽器兼容的前端框架和庫(kù)，如Bootstrap或jQuery，它們已經(jīng)處理了很多常見(jiàn)的兼容性問(wèn)題。

實(shí)施CSS Hack或條件注釋：

在特定情況下，可能需要使用CSS Hack來(lái)針對(duì)不同瀏覽器編寫(xiě)特定的樣式代碼。盡管這不是最佳實(shí)踐，但在某些特殊場(chǎng)景下可能有用。

對(duì)于舊版IE，可以使用條件注釋來(lái)加載特定的樣式或腳本。

使用跨瀏覽器測(cè)試工具：

利用工具如BrowserStack、Selenium等進(jìn)行自動(dòng)化和手動(dòng)的跨瀏覽器測(cè)試，確保網(wǎng)頁(yè)在各種瀏覽器和版本中都能正確顯示和功能正常。

持續(xù)監(jiān)控和用戶反饋：

建立一個(gè)機(jī)制來(lái)收集用戶關(guān)于瀏覽器兼容性問(wèn)題的反饋，并及時(shí)響應(yīng)和修復(fù)。

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

禁用硬件加速：

如果發(fā)現(xiàn)某些渲染問(wèn)題是由于硬件加速引起，可以嘗試在瀏覽器設(shè)置中禁用這一功能。

綜合運(yùn)用上述方法，可以有效地減少甚至解決瀏覽器兼容性問(wèn)題，提升網(wǎng)站的用戶體驗(yàn)。

淼淼這一期的內(nèi)容就講到這里啦！大家有不同的想法和意見(jiàn)可以在評(píng)論區(qū)留言?shī)W

SS Reset是指樣式重置，主要用于清除瀏覽器里面的默認(rèn)樣式，有利于頁(yè)面布局。以下總結(jié)了一些常見(jiàn)網(wǎng)站使用的默認(rèn)樣式，供大家參考。

淘寶

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
}

大眾版

在線咨詢

上一篇：如何快速寫(xiě)出表格代碼？exl表格轉(zhuǎn)換成html代碼
下一篇：10個(gè)對(duì)web開(kāi)發(fā)人員有用的HTML文件上傳技巧

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商