CSS 解析错误的处理规则【10bet】

来源:http://www.chinese-glasses.com 作者:Web前端 人气:144 发布时间:2020-03-14
摘要:时间: 2019-11-24阅读: 107标签: 错误CSS 句法( CSS Syntax ) 时间: 2019-09-26阅读: 99标签: 特性CSS 值的解析 语法是语言表达的规则。各种语言都有不同的语法,包括人类语言和计算机语言等。 C

时间: 2019-11-24阅读: 107标签: 错误CSS 句法( CSS Syntax )

时间: 2019-09-26阅读: 99标签: 特性CSS 值的解析

语法是语言表达的规则。各种语言都有不同的语法,包括人类语言和计算机语言等。

CSS 中的声明,由 CSS 的特性和值,中间以 ":" 隔开组成。

语法有时候也指句法( syntax ),指的是句子由词汇构成的规律。也可以将它看作组成句子的规则。它包含两个方面的涵义:

我们可以使用 CSS 选择器,为选中的元素设置需要的样式。

词汇:即,可以构成句子的有效用词。例如,英语中的单词,JavaScript 中的 "var"、"for" 等等;规律:也可以将它看作规则,即,如何使用有效的词汇组成句子。比如,JavaScript 中要用 'var toolName;' 定义变量, 但是 Java 中却应该使用 'String toolName;' 等定义变量。 不同的语言,组成句子的规则不同。

在介绍 CSS 的特性和值的时候,特地的提到了浏览器应该怎样处理错误的值 -- 应该将包含错误值,不符合句法的值的声明直接忽略。然而有些浏览器却按照自己的方式做了某些纠正,也就是浏览器容错。

CSS,同我们所认识的其他语言,例如 JavaScript 一样,有它自己的句法,适用于任何版本的 CSS。后续版本的应该坚持使用此核心句法,当然可以增加句法规则。

那么,有没有想过,在我们给予一个特性正确的值的情况下,浏览器应该怎样处理呢?是否最终你看到的就是你设置的值呢?答案是否定的!

CSS 句法描述了 CSS 的关键字、厂商扩展、可用字符集、规则集合、声明块、选择器、特性以及注释等所有 CSS 的构成部分。

当浏览器解析了一个文档 ( document ) 并且生成了文档树 ( document tree ),那么,它必须为文档树中的每一个元素,根据目标媒介类型所适用的每一个特性,指定一个值。

如常用的 Class 选择器命名规范被定义为:

而开发者给某个元素的 CSS 特性设置某个值,到这个元素的特性值被计算渲染,也就是得到最终的值,需要经过四步计算:

class : '.' IDENT

通过指定值 ( specified value ) 确定这个值;将这个值分解为一个可以用来继承的值,即计算后的值 ( computed value );必要情况下把计算后的值转换成一个绝对的值,即使用值 ( used value )根据显示环境的限制,改变使用值以使之能够显示在用户端,最后这个值被称作实际值 ( actual value )。

他由 '.' 字符开头,其后跟随 IDENT 规则。因此,根据断词书写规则检查 IDENT 书写规范如下:

这些值的计算过程类似工资的计算过程,你的应得工资是一个设置值,实际工资还要减掉你的缺勤,保险,个人所得税等……实际计算出来的数字才是应用到你身上的具体数额。

Macro

下面来详细的介绍这四个步骤的四种值。

Definition

指定值

ident[-]?{nmstart}{nmchar}*nmstart[_a-z]|{nonascii}|{escape}nmchar[_a-z0-9-]|{nonascii}|{escape}nonascii[^-177]escape{unicode}|\[^nrf0-9a-f]unicode\[0-9a-f]{1,6}(rn|[ nrtf])?nmstart[_a-z]|{nonascii}|{escape}nmchar[_a-z0-9-]|{nonascii}|{escape}nonascii[^-177]escape{unicode}|\[^nrf0-9a-f]unicode\[0-9a-f]{1,6}(rn|[ nrtf])?

一般来讲,开发者设定的值,即为指定值,但是最终这个值的确定还需考虑其他几个方面( 按照优先顺序排列 )。

对照表中内容可以组合出 Class 整体命名规范表达式为:

层叠顺序

class : '.' [-]?([_a-z]|[^-177]|\[0-9a-f]{1,6}(rn|[ nrtf])?|\[^nrf0-9a-f])([_a-z0-9-]|[^-177]|\[0-9a-f]{1,6}(rn|[ nrtf])?|\[^nrf0-9a-f])*

首先考虑有层叠顺序的情况,即开发者明确了设置了 CSS 特性的值。

CSS 解析错误

层叠顺序会影响开发者设定的值,所以,应该根据层叠顺序来确定声明的优先级别,优先级高的声明才会起作用。关于层叠顺序,后续会有详细的说明。

CSS 代码,可以看作是依照 CSS 句法所写的句子,而读这个句子的人,就是浏览器。因此,错误可能出自两个地方,一是不遵照 CSS 句法写代码的人, 一是不能正确解析 CSS 代码的浏览器。

例如,开发者在定义样式的时候,加了 '!important' 的声明要优于未加 '!important' 的声明。

在符合句法的情况下,一段 CSS 代码的解析,也可能在各个浏览器中都相同,但在不符合句法的时候,浏览器可能要加入自己的处理方式。正是因为浏览器的多样化, 才造成了对同一段 CSS 代码解析方式的多样化。

div{ height : 100px; height : 130px !important;}

这里所讲的 CSS 解析错误,指的是,如果浏览器遇到不遵循句法(不合法)的 CSS 代码,会因无法正确的解析,而产生的错误。

其中,带有 '!important' 的 height 声明才是指定值。

某些不合句法的 CSS 错误,W3C 给出了确切的处理规则。

继承( inheritance )

CSS 解析错误的处理规则错误处理总则

如果没有明确的设置这个值,那么会先考虑它是否继承了父元素的值。这时候指定值使用它父元素的值,通常是父元素的计算值。

对于不合法的 CSS 代码,浏览器需要忽略一部分不合法的样式表。

例如:

CSS2.1 及所有后继版本中,对于任何以破折号、下划线开头的 'property:value' 组合和不包含标识符的 @-keywords 组合,都以忽略的方式处理。

pThe greet emis/em good!/p

分析以下代码:

EM 元素没有指定颜色,他将继承父元素的颜色用来显示字符串 "is"。因此,EM 元素是红色。EM 元素 'color' 特性的指定值在没有层叠影响的情况下,就是 "red"。

div{ _height: 19px; width:100px;}

初始值

对于此类样式中的 '_height' 特性,浏览器应该以忽略的方式处理。经解析错误处理后的样式应该是:

最后,在不存在以上两种情况的时候,使用元素的初始值。

div{ _height: 19px; width:100px;}

如果不设置元素的 'width',它的指定值就是 "auto";对于 'font-size',不设置的情况下,其指定值是 "medium"。

未知的特性( properties )

关于指定值在 JavaScript 中的获取方法,可以使用 "element.style.property" 语句模式:

未知的特性,即属于以上所说不属于它句法中有效词汇的词汇。浏览器必须忽略带有未知特性的声明。

p The headline em is/em important!/pdiv /divscript type="text/javascript" window.onload = function() { var container = document.getElementById("container"); var sub = document.getElementById("sub"); var info = document.getElementById("info"); info.innerHTML = "container width : " + container.style.width +"br/container color : " + container.style.color +"br/sub color : " + sub.style.color; }/script

例:

经过测试可知,此种方式只适合获取设置的值,对于初始值和继承后的值都没有取到。

div{ yes:100px; width:100px;}

10bet,计算值

其中,'yes' 不是 CSS 的特性,因此上述的声明 'yes:100px;' 应该被忽略。

指定值在层叠的过程中被分解成计算值。例如,URI 会被解析成绝对地址,而 'em' 和 'ex' 单位会被计算为 pixel 或者绝对长度。

本文由10bet发布于Web前端,转载请注明出处:CSS 解析错误的处理规则【10bet】

关键词:

上一篇:没有了

下一篇:Node.js v13.2.0 开始支持ES modules了

频道精选

最火资讯