初步掌握 Mark Otto 版的 CSS Reset

在前端开发过程中,常常遭遇浏览器之间样式差异的问题。这是因为不同浏览器的默认样式表不同,而这些默认样式表会影响我们的页面布局和样式。

为了解决这个问题,CSS Reset 是一种很好的解决方案。 CSS Reset 可以重置浏览器的默认样式表,让我们自己定义的样式更准确地表达出来。

Mark Otto 是 Bootstrap 的创始人之一,他开发了一份 CSS Reset,被称为 Mark Otto 版的 CSS Reset。在这篇文章中,我们将初步掌握这份 CSS Reset。

什么是 CSS Reset?

CSS Reset 是一份 CSS 代码,在页面加载时覆盖浏览器的默认样式表。通常,这份 CSS Reset 包含许多“重置”和“规范化”行为,以确保不同浏览器的默认样式表产生的影响尽可能小。

通常, CSS Reset 会包含许多一般的重置行为,例如:

-----
---
-- -
  ------- --
  -------- --
-

这里我们使用了 CSS 的通配符 *,意为“所有元素”。换句话说,在这里我们重置了所有元素的 margin 和 padding。这个重置也可以针对特定的元素进行,例如:

-------
------
---------
-------
-------- -
  ------------ --------
  ---------- -----
  ------------ -----
  ------- --
-

这里我们把所有输入元素的字体大小调整为 100%,取消了它们的 margin,使它们之间的距离更为统一。

Mark Otto 版的 CSS Reset

Mark Otto 版的 CSS Reset 是一份被广泛用于 Bootstrap 框架和其他前端项目的 CSS Reset。它与一般的 CSS Reset 不同之处在于,它把更多的重点放在了 HTML5 元素和 WAI-ARIA 角色的辅助属性上。

HTML5 有一些新的元素,例如 <section><article><nav><header><footer>,它们与旧的元素比较不同,具有一些新的默认样式,包括 margin 和 padding。 Mark Otto 版的 CSS Reset 取消了这些元素的默认样式,从而避免它们导致的影响。

在 HTML5 中,还有 WAI-ARIA 角色的辅助属性。这些角色可以让辅助工具(如屏幕阅读器)更好地理解页面。例如,我们可以为我们的页面定义一个“导航”区域:

---- ------------------
  ---
------

这里的 role="navigation" 存在于 HTML5 规范中,它为 nav 元素定义了一个被辅助工具理解的角色。 Mark Otto 版的 CSS Reset 对这些角色进行了一些重置,以确保它们的 styling 符合我们的预期。

这是一份典型的 Mark Otto 版的 CSS Reset:

--
 - ---- ----
 - --------- ------
 - ---------------------------------------------------
 --
 
-- --------
 -
 - -- ------ --- ------- ---- ------ --- ----- -- ----- ---- ------------
 - -- ------- --- ---- ------ -- --- ---------
 - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ----
 - -- ------ --- ------ -- --- ---------
 --

---- -
  ------------ -----------
  ------------ ----- -- - --
  ------------------------- ----- -- - --
  --------------------- ----- -- - --
  ------------------- ---------- -- - --
  ---------------------------- ------------
-

--
 - ------ --- ---- ---------- -- ------ ----- -- -- ---
 --

- -
  ----------------- ------------
-

--
 - ------- ----------- ---- ------- --- ---- ----- ------- -- --- ---------
 --

---------
------- -
  -------------- --
-

--
 - ------- --------- ------------- ------- ------ --- ----- ---------
 --

------- -
  -------- ---- -------
-

--
 - ------- ----------- --- ----------- -- ------------- ---- -- --- ---------
 --

--- -
  ------------ ---------- ---------- -- - --
  ---------- ---- -- - --
-

-- -----
 -
 - -- ------ --- ------- ---- ------ --- ---------- ----- -- ----- ---- ------------
 - -- ------- --- ---- -------- -- ---- --- ---
 - -- ------- --- ----- ----------- ---- ---------- -------- -- ---
 - -- ------ --- ----------- -- ---- --------- -- ---- --- --------
 - -- ------ --- ----- ------- -- ------ --- ------ -- ------
 --

------
-------
-------
---------
-------- -
  ------------ ----------- -- - --
  ---------- ----- -- - --
  ------------ ----- -- - --
  ------ -------- -- - --
  -------- -- -- - --
  ------- -- -- - --
  ----------------- ------------
  ----------- -----------
  -------------- --
  ------------------- -----
     ---------------- -----
          ----------- -----
-

-- ------ --- ----- ------ --- ------- -- -------- --
 
-------------------------
----------------------- -
  ------- --
  -------- --
-

-- ------- ------- -- ------- ------------- -- ------- ----- ------------ -- --- -- ----------- --

----- -
  ------------ -------
-

-- --------
 -
 - -- ------- --- --------- -- ----- --------- ----- -- --- --- -------
 - -- ------ ---- ---------- -- --------- -- -------
 --
 
-------- -
  --------- ----- -- - --
  ------------ -------- -- - --
  ---------- -------- -- - --
  ------------ -------- -- - --
-

这份 Reset 涵盖了许多常见元素和情况。例如,它处理了 <html> 元素的文字调整问题,以及输入元素的 background-color 和 border-radius 等。

结论

Mark Otto 版的 CSS Reset 是一份被广泛采用的 CSS Reset。它会确保浏览器的默认样式不会影响我们的页面布局和样式。

本文介绍了 Mark Otto 版的 CSS Reset 的一些重要方面和代码示例。我们希望读者能够对 CSS Reset 有更深入的了解,并在实际项目中应用它,解决样式兼容性问题。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/67221d782e7021665e0a5c9b