这些表单元素都处在可用状态,   译文出处

作者: 前端  发布:2019-11-05

调试 CSS 的方法

2016/09/06 · CSS · 调试

原文出处: Ben Frain   译文出处:众成翻译 - yanni4night   

我经历过许多 CSS 代码的调试工作,有别人写的也有自己写的,有移动端平台的也有标准桌面浏览器的,从陈旧的 IE 到最新的基于 Webkit 的每日构建。经验告诉我,很多人并没有一个标准的 CSS 调试流程。

我发现在大多数情况下,拥有专业的解决问题的方法,能够节省花在 bug 上的时间。

下面是我总结的经验。

我不保证这是最适合的调试 CSS 的方法,但是确实对我很有效。如何 CSS 不是你的主要编程语言,调试它可能就像暗黑艺术一样;遵循下面的指南能够帮助你更有效地定位和解决 bug。

概括地说,我把调试流程分为 3 个阶段:

  • 评估并快速修复
  • 还原和重现
  • 定位根源并修复

我们挨个解释每个阶段并实践一个例子。

  1. HTML、XML、XHTML 有什么区别:

1、:enabled选择器

评估并快速修复

如果 CSS 是你的主要工作语言,或者你对 CSS 有一定的理解和实践经验的话,解决 CSS 问题就有很多简单的方法,否则的话,方法就少一些。

有经验的 CSS 开发者可能都知道的一些 CSS 陷阱:

  • 图片周边存在有趣的空白?设置 display: block(图片默认是内联的,因此会有空白)。
  • 元素排列不正确?你可能有浮动的元素。
  • 绝对定位元素不显示、位置错误或者被遮挡?你可能没有设置父元素的 position 属性或者用 transform 及 opacity 创建一个 z-index 上下文。
  • 伪元素不显示?你可能忘记了设置 ‘content’的值。

这样的 “bug” 有一大堆。实际上根本没有 bug,更多的是开发者缺少对浏览器行为的理解。更准确地说,是 CSS 代码让浏览器怎么做。

对这些 CSS 特性熟悉的开发者能够快速定位到问题并且修复。他们对 bug 的认识与那些对 CSS 不了解的人会产生分歧。这样在解决 CSS bug 中对‘工作流’需求的重要性的认识就会因人而异。

对于‘快速修复’中没有覆盖的陌生问题,在开发者工具中靠猜来解决问题的方式已经没什么价值。即使运气好问题被解决了,也很难判断出问题到底是怎样被解决的。

如果出现的问题不能被轻易解决,先确定问题区域的范围,抓取 HTML 标签(也就是拷贝 DOM),进入下一个调试阶段:还原和重现。

专业提示:大多数浏览器的开发者工具会让你选择包裹元素并拷贝 HTML 区块。在 Chrome 的开发者工具中,要连同包裹元素一起拷贝,需要点击 ‘Copy > Copy OuterHTML’。

  • HTML,超文本标记语言,是语法较为松散的、不严格的Web语言;
  • XML,可扩展标记语言,主要用于存储数据和结构参考;
  • XHTML,可扩展超文本标记语言,基于XML,作用与HTML类似,但语法更严格参考。

在Web的表单中,有些表单元素有可用(“:enabled”)和不可用(“:disabled”)状态,比如输入框,密码框,复选框等。在默认情况之下,这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。

还原和重现

本阶段的 CSS bug 修复在类似 Codepen 的帮助下异常简单。我们目的主要是复现出此问题 – 也就是引起 bug 的代码。这能让我们快速定位 bug,直捣黄龙。

为清晰起见,只把相关的 HTML 和 CSS 提取出来复现问题。你既可以手打 HTML 对应的 CSS,也可以复制真实的代码。如果可能的话,不用把所有 CSS 代码一股脑拷贝过去重现问题,保证最精简的要素即可。保持逐步增加 CSS 的习惯,问题就会自己找到你。

在快要接近真相时,往往只需要一个特殊的 CSS 属性的改变就能让 bug 暴露出来。

相对应的做法是,把所有 CSS 都扔进入复现问题,然后每次移除一点,直到问题出现。在实践中,我发现这略笨,不用也因人而异,你可能有不同的见解。

逐步地增加或删除 CSS 代码已经是重现问题和定位故障的固定套路了。

  1. 怎样理解 HTML 语义化
    根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
  2. 怎样理解内容与样式分离的原则

 

那么 HTML 标签呢?

假设使用最少 CSS 代码复现问题时,效果有如原始代码一样。这也是有用的,我们现在看 HTML 标签。

第一件事要做的,也是不能跳过的,就是检查标签的有效性。即使报告出我们不关心的问题(比如 meta),至少能保证它不会以某种方式破坏美感。我们希望能发现未闭合的标签、没有引号的属性,以及其它任何可能影响浏览器解析的问题。建议你使用 W3C validator。

一旦标签检查通过,将有助于消除浏览器引入意外样式的可能性。这样做:

首先,把所有元素改成 div(块级元素)和 span(行内元素),保证它们只被 CSS 的类选择器选中。也许有必要把额外的选择器移除,如把 a.link 改为 .link

通过使用固定的标签我们消除了浏览器针对特定元素引入默认样式的可能性。表单元素是个特例(马上会在例子中见到)。

如果把所有元素改成 div 和 span,问题消失了,那么浏览器引入默认样式的嫌疑就被确定了。现在在 computed styles 面板中寻找浏览器增加了什么样式,想办法覆盖它。总之就是要看计算后的样式。

1、 前言

在学习html基础的时候,往往需要建立原则性的认识。其中就不乏常被提起或面试常见题目:html语义化的理解以及何为内容与样式分离的原则。在查阅资料的过程中,我发现对这两个问题的理解,对于培养良好的编码习惯和编码思维是非常重要的。于是记录于博客,以作记忆。
2、 问题
1)、怎样理解 HTML 语义化
2)、怎样理解内容与样式分离的原则
3、怎样理解 HTML 语义化
1) 何为语义化
  语义化的含义就是用正确的标签做正确的事情,HTML语义化是指根据内容的结构选择合适的标签,也就是根据网页内容将代码语义化。
  HTML标签语义化是Web网页标准化的重要一环,也是标准制定时重要的设计原则。HTML5中新增加的很多标签(如:<article>、<nav>、<header>和<footer>等)就是基于这样的设计原则。
2)检验标准
  浏览器会对语义化的标签设计默认的样式,所以验证页面是否语义规范的一个简单方式就是去掉CSS样式后页面是否还能正常阅读。
3)优点
有利于搜索引擎以及爬虫工具等更容易读懂页面代码。因为机器不会关注页面实际渲染的外观,爬虫是依赖于标签来确定上下文和各个关键字的权重,只会关注页面内容本身,页面渲染的漂亮与否对机器识别毫无帮助。
语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构。HTML标签是页面内容的载体,语义化的标签相对于是对所包含内容的一个整体声明,也使得页面整体结构清晰。
便于团队开发和维护
便于开发者阅读和写出更优雅的代码。使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
4)如何做到html语义化
A、代码中使用的标签<div>和<span>是在所有的HTML标签中最没有语义的。所以要做到标签语义化,首先要尽量少用<div>和<span>这两个标签,在使用这两个标签时尽量能找到更有语义的标签代替。
  网页的开发者应该熟悉所有规范的HTML标签的使用场景,在合适的地方使用合适的标签。
  例如,标签Hx系列则表示标题,在网页中展示各层级的标题时使用;ul和ol标签表示列表,在展现各种数据列表或者菜单时使用;其它使用率较高的语义标签有:p、em、strong、table、site、blockquote等,以及HTML5新加入的标签:<header><footer><article><section><nav><aside>等。
B、熟悉各标签规范的属性,给HTML标签设置必要的属性。
  和标签语义化的重要性一样,某些属性的设置也是HTML语义化重要的环节。在很多规范中规定需要设置的两个属性是alt属性和title属性,这两个属性设置的也是为了提高HTML的语义。
  在img标签中,alt是必须要设置的属性,因为img是自闭合标签,并没有包含可以解释说明图片的额外信息。alt属性的文字说明是当图片在浏览器中未加载时的显示的代替;title属性是可选属性,当标签包含的内容不足以说明语义时,可以通过title添加额外的信息, 在浏览器中当鼠标移到元素上时会显示提示文本。
  还有一个重要的属性是<label>标签中的for属性。<label>标签是<input>元素定义的标注。<label>标签的for属性值指代一个表单元素,属性值为此表单元素的id值。for属性的作用不仅把<lable>标签上的触发事件指向了for属性指代的表单元素,也从语义上绑定了<lable>和此表单元素。

<form>
<label for="user_name">User Name:</label>
<input type="text" name="user_name" id="user_name" />
</form>

4、怎样理解内容与样式分离的原则
1)网页分离

一个网页分为三个部分:Html——结构,css——表现,javascrip——行为。内容也就是html,样式也就是css。所以内容和样式的分离,就是指在网页编码的过程中,要将html和css两大部分分开。
2)如何实现

内容与样式分离的原则的实现,一个是要依靠意识,另一个是依靠经验。
  举例而言,面对一个分块明显的网页设计图时:

初级的开发人员思路及制作方法:div 层层嵌套;
中级的开发人员思路及制造方法:去掉多余的 div ,进行简化;
高级的开发人员思路及制造方法:最大化的简化 html 的结构,然后用 css 进行设置,减少 html 与 css 的契合度。

正确做法是写HTML的时候先不管样式,重点放在HTML的结构和语义化上,让HTML能提现页面结构或者内容,,然后进行 css 样式设置,减少 HTML 与 CSS 契合度(即内容与样式分离) ,写JS的时候,尽量不要用JS去直接操作样式,而是通过给元素添加删除class来控制样式变化(即行为分离)。
3)分离原则的优点

浏览器加载网页页面速度变快。分离原则下,大部分页面代码写在了CSS当中,页面体积容量变得更小。
网页修改设计时,效率、省时。根据html标签内ID或class的标记,到CSS里找到相应的ID或class,可以快速替换指定位置的样式,不会破坏页面架构和其他部分的样式。
典型的应用就是网页换肤,使用相同的 html 结构,不同的 css 样式。
更好地被搜索引擎收录。基于内容与样式分离的原则,html的语义化就是首要考虑的,网页中语义化的标签代码就会更加适合搜索引擎。
css样式的分离,它可以根据不同的浏览器,达到显示效果的统一。保证网页架构不变形的前提下,放心在不同浏览器渲染显示样式。

示例演示

定位根源并修复

如果简化 HTML 标签也没有找到问题,并且是可稳定复现的,那么就该换个浏览器试一试。是否同样的问题出现在 Chrome,IE,Safari 和 Firefox 上?如果不是,哪个的表现是正确的?如果只有一个浏览器是错的,那么就值得去搜索一下对应的 bug 跟踪系统了:

  • Chrome bugs
  • Firefox bugs
  • Safari bugs
  • Microsoft bugs

是某浏览器的问题吗?或者是某浏览器的特定版本的问题?问题是否在修复中?有没有不影响其它浏览器的解决方案?实在不行你可以为特定的浏览器编写修复代码吗?

过去我曾详细描述过如何向浏览器提 bug,在 2011 年 Lea Verou 也写过一份描述提 bug 流程的文章。

另一种情况是可能需要‘无害的’hack。例如,我最近遇到的一个场景是在一个块级元素后面的元素必须是绝对定位的才能显示出来。 left: 100% 只有在 IE 浏览器(移动端是Windows Phone 8,8.1 和 10)中不生效。IE 中在两个元素之间总有一个空隙。看起来像是一个亚像素渲染问题,因此 left: 99.99% 就能解决问题而不会影响其它浏览器。这是个 hack 手段,但我们知道原理(有的浏览器会舍入,其它则不会),标注在 CSS 的注释中,没有任何危害。

微软的 Greg Whitworth 告诉我了关于亚像素舍入的更多细节。WebKit 和 Blink 内核舍入 1/64,Gecko 内核舍入 1/60,Edge 舍入 1/100(感谢 Webkit 开发者 ‘smfr’)。

参考:https://segmentfault.com/a/1190000005626375#articleHeader4http://www.cnblogs.com/lovefan/p/3855513.htmlhttp://www.imooc.com/video/242
本文章著作权归饥人谷_huangyh_max和饥人谷所有,转载须说明来源!

 

计算后样式

开发者工具中比较容易被忽视的是 computed styles 面板。如果你对 computed styles 不熟悉的话,顾名思义,就是真正应用到元素上的样式。这很重要,因为你写的样式不一定会生效。同样,你写的样式也不是所有生效的样式。下面的例子将解释我的意思:

XHTML

<fieldset class="outer"> <div class="inner"> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> <label for="" class="item"><span>hello</span></label> </div> </fieldset>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<fieldset class="outer">
    <div class="inner">
        <label for="" class="item"><span>hello</span></label>
        <label for="" class="item"><span>hello</span></label>
        <label for="" class="item"><span>hello</span></label>
        <label for="" class="item"><span>hello</span></label>
        <label for="" class="item"><span>hello</span></label>
        <label for="" class="item"><span>hello</span></label>
        <label for="" class="item"><span>hello</span></label>
        <label for="" class="item"><span>hello</span></label>
        <label for="" class="item"><span>hello</span></label>
        <label for="" class="item"><span>hello</span></label>
    </div>
</fieldset>

对应的 CSS 是:

CSS

.outer { max-width: 400px; } .inner { width: 100%; overflow-x: auto; overflow-y: hidden; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; white-space: nowrap; } .item { display: inline-block; width: 100px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.outer {
    max-width: 400px;
}
 
.inner {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}
 
.item {
    display: inline-block;
    width: 100px;
}

outer 的宽度会是多少?如果你认为是 max-width 的 400px,我会原谅你的。但是不是我们看到的宽度,看 Ben Frain 编写的 codepen。

什么情况?为什么不是 max-width 的值?给你个思路,打开 Computed Styles 面板。

找到问题的根源了吗?

我来给你解释下。默认地,fieldset 元素的宽度会等于其内容的宽度。在 Chrome 的Computed Styles 面板中,min-width 的值是一个新的 min-content

min-width 设置一个新值来“修复”它。这个例子中,min-width: 0 就会让 max-width 按照我们期望的那样进行工作。

这正是开发者工具的 Computed Styles 面板中看到的值。记住你写的代码不一定是浏览器计算后的。

通过“:enabled”选择器,修改文本输入框的边框为2像素的红色边框,并设置它的背景为灰色。

讨论

页面出现异常的原因可能很多并且不尽相同。不同浏览器对规范的实现存在差异是普遍存在的现象。相比于编写一个疯狂的浏览器 bug 目录,解决问题的最有效流程还是始终保持条理性。总结来看有效的措施包括:

  • 评估 bug,执行快速修复
  • 使用最少的代码重现问题
  • 利用工具和 bug 追踪描述原因
  • 使用更灵活的代码修复问题,或者使用注释过的hack手段,亦或拷贝副本修复

    1 赞 3 收藏 评论

9159.com 1

 

HTML代码:

 

<form action="#">

  <div>

    <label for="name">Text Input:</label>

    <input type="text" name="name" id="name" placeholder="可用输入框"  />

  </div>

   <div>

    <label for="name">Text Input:</label>

    <input type="text" name="name" id="name" placeholder="禁用输入框"  disabled="disabled" />

  </div>

</form>  

CSS代码:

 

div{

  margin: 20px;

}

input[type="text"]:enabled {

  background: #ccc;

  border: 2px solid red;

}//说白了就是给可用的输入框添加样式

 

2、:disabled选择器

 

“:disabled”选择器刚好与“:enabled”选择器相反,用来选择不可用表单元素。要正常使用“:disabled”选择器,需要在表单元素的HTML中设置“disabled”属性。

 

示例演示

 

通过“:disabled”选择器,给不可用输入框设置明显的样式。

 

HTML代码:

 

<form action="#">

  <div>

    <input type="text" name="name" id="name" placeholder="我是可用输入框" />

  </div>

  <div>

    <input type="text" name="name" id="name" placeholder="我是不可用输入框" disabled />

  </div>

</form>  

 

CSS代码

 

form {

  margin: 50px;

}

div {

  margin-bottom: 20px;

}

input {

  background: #fff;

  padding: 10px;

  border: 1px solid orange;

  border-radius: 3px;

}

input[type="text"]:disabled {

  background: rgba(0,0,0,.15);

  border: 1px solid rgba(0,0,0,.15);

  color: rgba(0,0,0,.15);

}

 

 

3、:checked选择器

在表单元素中,单选按钮和复选按钮都具有选中和未选中状态。(大家都知道,要覆写这两个按钮默认样式比较困难)。在CSS3中,我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。

 

示例演示:

 

通过“:checked”状态来自定义复选框效果。

 

HTML代码

 

<form action="#">

  <div class="wrapper">

    <div class="box">

      <input type="checkbox" checked="checked" id="usename" /><span>√</span>

    </div>

    <lable for="usename">我是选中状态</lable>

  </div>

  

  <div class="wrapper">

    <div class="box">

      <input type="checkbox"  id="usepwd" /><span>√</span>

    </div>

    <label for="usepwd">我是未选中状态</label>

  </div>

</form> 

CSS代码:

 

form {

  border: 1px solid #ccc;

  padding: 20px;

  width: 300px;

  margin: 30px auto;

}

 

.wrapper {

  margin-bottom: 10px;

}

 

.box {

  display: inline-block;

  width: 20px;

  height: 20px;

  margin-right: 10px;

  position: relative;

  border: 2px solid orange;

  vertical-align: middle;

}

 

.box input {

  opacity: 0;

  position: absolute;

  top:0;

  left:0;

}

 

.box span {

  position: absolute;

  top: -10px;

  right: 3px;

  font-size: 30px;

  font-weight: bold;

  font-family: Arial;

  -webkit-transform: rotate(30deg);

  transform: rotate(30deg);

  color: orange;

}

 

input[type="checkbox"] + span {

  opacity: 0;

}

 

input[type="checkbox"]:checked + span {

  opacity: 1;

}

 

4、::selection选择器

 

“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下,用鼠标选择网页文本是以“深蓝的背景,白色的字体”显示的,效果如下图所示:

 

从上图中可以看出,用鼠标选中“专注IT、互联网技术”、“纯干货、学以致用”、“没错、这是免费的”这三行文本中,默认显示样式为:蓝色背景、白色文本。

 

有的时候设计要求,不使用上图那种浏览器默认的突出文本效果,需要一个与众不同的效果,此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。

 

示例演示:

 

通过“::selection”选择器,将Web中选中的文本背景变成红色,文本变成绿色。

 

HTML代码:

 

<p>“::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下,选择网站文本是深蓝的背景,白色的字体,</p>

CSS代码:

 

::-moz-selection {

  background: red;

  color: green;

}

::selection {

  background: red;

  color: green;

 

  

 注意:

 

1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。

 

2、Firefox 支持替代的 ::-moz-selection。

 

5、“:read-only”伪类选择器

用来指定处于只读状态元素的样式。简单点理解就是,元素中设置了“readonly=’readonly’”

 

示例演示

 

通过“:read-only”选择器来设置地址文本框的样式。

 

HTML代码:

 

<form action="#">

  <div>

    <label for="name">姓名:</label>

    <input type="text" name="name" id="name" placeholder="大漠" />

  </div>

  <div>

    <label for="address">地址:</label>

    <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />

  </div>

</form>  

9159.com, 

CSS代码:

 

form {

  width: 300px;

  padding: 10px;

  border: 1px solid #ccc;

  margin: 50px auto;

}

form > div {

  margin-bottom: 10px;

}

 

input[type="text"]{

  border: 1px solid orange;

  padding: 5px;

  background: #fff;

  border-radius: 5px;

}

 

input[type="text"]:-moz-read-only{

  border-color: #ccc;

}

input[type="text"]:read-only{

  border-color: #ccc;

}

 

6、:read-write选择器

“:read-write”选择器刚好与“:read-only”选择器相反,主要用来指定当元素处于非只读状态时的样式。

 

示例演示

 

使用“:read-write”选择器来设置不是只读控件的文本框样式。

 

HTML代码:

 

<form action="#">

  <div>

    <label for="name">姓名:</label>

    <input type="text" name="name" id="name" placeholder="大漠" />

  </div>

  <div>

    <label for="address">地址:</label>

    <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />

  </div>

</form>  

CSS代码:

 

form {

  width: 300px;

  padding: 10px;

  border: 1px solid #ccc;

  margin: 50px auto;

}

form > div {

  margin-bottom: 10px;

}

 

input[type="text"]{

  border: 1px solid orange;

  padding: 5px;

  background: #fff;

  border-radius: 5px;

}

 

input[type="text"]:-moz-read-only{

  border-color: #ccc;

}

input[type="text"]:read-only{

  border-color: #ccc;

}

 

input[type="text"]:-moz-read-write{

  border-color: #f36;

}

input[type="text"]:read-write{

  border-color: #f36;

}

 

 

7、::before和::after

::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常和"content"配合使用,使用的场景最多的就是清除浮动。

 

.clearfix::before,

.clearfix::after {

    content: ".";

    display: block;

    height: 0;

    visibility: hidden;

}

.clearfix:after {clear: both;}

.clearfix {zoom: 1;}

 

当然可以利用他们制作出其他更好的效果,比如右侧中的阴影效果,也是通过这个来实现的。

 

关键代码分析:

 

.effect::before, .effect::after{

    content:"";

    position:absolute;

    z-index:-1;

    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);

    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);

    box-shadow:0 0 20px rgba(0,0,0,0.8);

    top:50%;

    bottom:0;

    left:10px;

    right:10px;

    -moz-border-radius:100px / 10px;

本文由9159.com发布于前端,转载请注明出处:这些表单元素都处在可用状态,   译文出处

关键词:

上一篇:没有了
下一篇:没有了