智能选择器和语义化的CSS

2015-10-08  来自: 陕西印象信息技巧无限公司 浏览次数:1462

“构造永久屈从于功能,这是不变的轨则”,修建工程师“摩天大年夜楼之父”Louis Sullivan如是说。由于工程师不欲望让无辜的人们被碾压在巨大年夜的修建物下,这类大年夜拇指式的规矩是相当有效的。在设计中你应当总是以功能为重,然后让构造在成果中出现。假设你以构造为重,固然这可以或许建造出一栋漂亮的摩天大年夜楼,但价值是埋下了很多相当风险的种子。

这些都是关于修建师的,那么对前端架构师或许“非真实的架构师”来讲呢?我们须要遵守这个轨则照样忽视它?

随着面向对象的CSS(OOCSS)的出现,愈来愈多人趋势于“把出现的语义从文档语义中离开出来”。借助于类(classes)的非特指含义,我们可以或许以分别的方法来管理一个文档和一个文档的表面。

在这篇文章傍边,我们会摸索多种为Web文档添加款式的办法,他们能把文档语义与视觉设计相结合在一路。经过过程“聪慧的”选择器的应用,我们经过过程这类办法给你讲解如何去查询语义化的HTML文档现有的功能特点,以此作为对那些格局优胜的标记的一个嘉奖。假设你的代码是精确的,你必定会取得你所希冀设计出来的器械。

我想,假设你和我一样同时在开辟几个不合的项目,我欲望经过过程这些办法会简化你的任务流程和并能更轻松地穿越在这些项目傍边。别的,在最后的部分我们 会讲解一个更主动的办法:我们会制造一个包含属性选择器的CSS书签来测试那些写得很蹩脚的HTML文档并应用伪元历来反应缺点。

聪慧的选择器

款式表的创造使我们可以或许将那些美化HTML文档的代码从HTML文档平分别出来。但它关于我们书写标准的HTML文档方面所带来的赞助其实不像遥控器 那样为电视机带来了更高质量的电视节目。它只不过把任务变得加倍简单。由于我们可以或许应用一个选择器来为多个元素添加款式。(例如 p 可感化于一切的段落元素),页面的分歧性和可保护性也不像之前那样那么令人害怕。

p 选择器的情势就是智能选择器的一个代表。由于 p 选择器在语义分类方面具有后天的基本。不消开辟者多做额外的任务它曾经知道如何确认一个段落和甚么时候为他们添加款式,异常简单而有效,特别是你想为所见即所得编辑器产生的一切的段落元素添加款式的时辰。

但假设说它是智能的选择器,那非智能的选择器又是哪些呢?一切须要开辟者参与并更改文档从而惹起款式上的变更的选择器都被称之为非智能的选择器。class 就是一个经典的非智能选择器由于它不是作为语义商定的一部分出现的。你可以灵活地定名和组织类,但须要必定的思虑;除非你在文档上应用它们,不然它们不会主动地履行任何任务。

应用非智能选择器是很消费开辟时间的,由于我们须要手动地为每个选择器添加对应的不合的款式并把类名复制到每个须要应用此类的元素。假设我们没有 p 标签,我们不能不应用非智能选择器来管理段落,例如在每个段落元素中应用一个 .paragraph类来指明。如许做的个中一个缺点是这些款式表不是可移植的,由于你不克不及再没有为HTML文档的标签指定照应的类名的情况下而应用这些款式到所须要的元素傍边。

非智能选择器有时辰照样有须要的,并且我们很少人会完全依附智能选择器。但是,一些非智能选择器能够会由于在文档的构造和表示之间搭配欠妥而变成“愚蠢的”选择器。我将会议论.button这个应用频率极高的“愚蠢”的选择器。

不合组合的好处

智能选择器其实不限制于HTML标准中所供给给我们的基本元素。想要构建复杂的智能选择器,你可以服从高低文和功能属性的组合来辨别基本元素。一些元素,例如<a>,供给了大年夜量的功能差别给开辟者推敲和应用。其他的元素,例如<p>元素,任何情形中在明白的功能上没甚么差别,但也会根据高低文来承当稍微不合的角色。

header p {
   /* styles for prologic paragraphs */
}

footer p {
   /* styles for epilogic paragraphs */
}

像如许的简单后代选择器是异常有效的,由于它们让我们可以或许从视觉上看出一个元素的不合类型而无需从物理上更改底层的文档。这是全部款式表创造的缘由:既促进物理上的分别而又无需破坏那些存在于文档和设计之间的概念上的相互关系。

弗成防止的,一些OOCSS的粉丝们对如许的后代选择器是有点不太认同的,它们更爱好像下面这个例子那样来做标记,这是从BEM的“定义”文档中找到的。

1 <ul class="menu"> 2   <li class="menu__item">…</li> 3   <li class="menu__item">…</li> 4 </ul>

我不会再对后代选择器作进一步的评论辩论,由于我肯定你每天都在应用它们,除非你偏好过下面这类过量的概述。换言之,我们接上去会合中于属性选择器和属性中描述的功能所带来的差别。

超链接属性

即使是那些CSS和HTML之间的概念分别的拥戴者也乐于承认一些属性——除类和自定义数据属性以外的大年夜多半的属性,实际上和文档的外部任务的有重要关系的。没有href属性你的超链接不会链接就任何器械。没有type属性,浏览器没法知道衬着哪个类型的input元素。没有title属性,你的abbr元素则能够代表任何器械。

像如许的属性有助于改良文档细节的语义化,不然你须要去确认主题元素能否精确被衬着和运作。假设它们不存在,那么它们应当被创造,假设它们曾经存在了,那为甚么不实用它们呢?你不克不及够只写CSS而不写HTML吧。

REL属性

rel属性是链接关系的一个标准属性,是一个描述链接的详细的用处的一个办法。其实不是一切的链接的功能都是雷同的。得益于浩大的WordPress的应用者,rel="prev"和rel="next"成为两个最广泛采取的值,并有助于描述分页博客内容的每个伶仃页面之间的关系。从语义下去说,一个具有rel属性的a标签依然是一个a标签,但我们曾经能加倍详细地表示它了。这和类不雷同,这类详细是从语义上直接表示的。

rel属性应当只被用在合适的处所,由于它们是被HTML的功能标准所保护的,并能是以被不合的用户代理采取从而进步用户体验和搜刮引擎的精que度。那么,你曾像下面如许为链接添加过款式吗?应用简单的属性选择器,如:

[rel="prev"] {
  /* styling for "previous links" */
}

[rel="next"] {
  /* styling for "next" links */
}

属性选择器被一切的浏览器所支撑除最陈旧和落后的浏览器(IE6),是以只需这个属性存在于标签中的时辰没有任何来由不去应用它们。在它的优先级方面,它和类具有雷同的权重值。但是,我记得它被建议,我们应当将文档和表示语义分别。我不想浪费这个rel属性,所以我最hao元素设置一个毫成心义的属性并经过过程它来停止款式的添加。

1 <a href="/previous-article-snippet/" rel="prev" class="prev">previous page</a>

此处起重要留意的第1件任务是,下面元素中唯yi没有对文档的语义有赞助的是类这个属性。换句话说,类在下面的文档中式唯yi的没有起到甚么功能上的感化的器械。在实际中,这意味着类是唯yi的打破了分别定律的并被解释为:它实际存在于文档中却又没对文档的构造有任何赞助。

好了,说了这么多笼统的概念,但它的可保护性方面若何?大年夜家都接收应用class作为款式钩子,让我们看看当经过过程编辑或重构时移除一些属性的时辰会产生甚么任务。假定我们应用了伪元历来为[rel="prev"]链接的文字前面添加一个左指箭头:

1 .prev:before {2   content: '\2190'; /* encoding for a left-pointing arrow ("←") */3 }

移除类的同时也会同时移除伪元素,反过去说这个举措会将箭头所移除。但没有了这个箭头,将没有其他的器械能告诉我们链接现存的prev关系。出于异样的缘由,移除rel属性也会招致箭头的不完全:由于固然class会持续让这个箭头得以显示,却总是使文档的状况关系损掉。只要直接的经过过程语义的属性来给出款式并应用,你才能让你的代码和你本身保持真实。只如果文档中存在的真实的功能,你就要让它被看见。

属性字串

我可以想象你正在想甚么:“这很风趣,但在超链接中有若干个如许的语义款式钩子?我照样会不能不依附类来应用款式。”那么请你看看下面不合的链接功能的不完全的列表吧,一切都是以a元素为基本的:

  • links to external resources,

  • links to secure pages,

  • links to author pages,

  • links to help pages,

  • links to previous pages (see example above),

  • links to next pages (see example above again),

  • links to PDF resources,

  • links to documents,

  • links to ZIP folders,

  • links to executables,

  • links to internal page fragments,

  • links that are really buttons (more on these later),

  • links that are really buttons and are toggle-able,

  • links that open mail clients,

  • links that cue up telephone numbers on smartphones,

  • links to the source view of pages,

  • links that open new tabs and windows,

  • links to JavaScript and JSON files,

  • links to RSS feeds and XML files.

这就是链接功能上的差别,一切的类型都可以被用户代理所辨认。如今让我们思虑一个成绩,为了让一切的这些详细链接类型都履行不合的功能,它们必须要 有不合的属性。也就是说,为了履行不合的功能,链接的书写情势是须要有所变更的;并且,假设它们书写情势不合,它们便可以经过过程这个来添加不合的款式。

在预备这篇文章的时辰,我对一个构思作了一个考验,定名为Auticons。Auticons是一个图标字体和款式表,用于主动地为链接添加款式。外面的一切选择器都是属性选择器而没有一个类,为格局优胜的超链接来调用款式。

在很多的案例中,Auticons 对href值的一个子集停止了查询来肯定超链接的功能。经过过程的它们的属性值的开首或开头来对照应的元素添加款式,又或许是根据它们属性值能否包含了一个指定的字串来查找对应元素也是能够的。下面是一些常浅显的例子。

安然协定 每个格局优胜的URL(例如:绝dui地址的URL)会以一个URI scheme 加一个冒号开端。在搜集中我们最罕见的就是http:,然则mailTo:(用于简单邮件传输协定SMTP)和tel:(用于德律风号码)也是很经常使用的。假设我们可以知道超链接的href的值会若何开端,我们可以应用这个商定来作为款式钩子。鄙人面的用于安然页面的例子,我们应用^=比较器,意思为“以...开端”。

1 [href^="https:"] {2    /* style properties exclusive to secure pages */3 }

在Auticons 中,根据一个特定的用于辨认href属性的语义形式,连到安然页面的链接用一把锁来做装潢。如许做的长处是:

  • 安然页面的链接 —— 也仅仅是安然页面 —— 可以或许经过过程一把挂锁来作使它像是一个安然页面链接。

  • 那些不再链接到安然页面的链接会掉去http协定同时用作比方的挂锁也会消掉。

  • 新的安然页面的链接也会主动采取这个挂锁来标记这个链接。

当应用于静态内容的时辰,这个选择器显得相本地智能。由于安然链接具有它特定的URI scheme,所以属性选择器可以或许预感到它的调用:一旦编辑器键入一些包含安然链接的内容,链接便会主动应用款式来赐与用户一个它是一个安然链接的感到。 由于不须要甚么类和对HTML停止编辑,所以简单的Markdown 中的链接是如许的:

[Link to secure page](https://payment.example.com/)

但要留意的是应用 [href^="https:"]也不是永久精确的,由于也不是一切的 HTTPS 真正安然的。不过,这仅仅是当浏览器本身不太靠得住的情况下。专业的浏览器都邑在显示 HTTPS 的时辰在地址栏衬着一个挂锁。

文件类型

正如我说过的,你也能够经过过程 href属性以甚么开头来为超链接添加款式。在实际中,这意味着你可以应用CSS来指出链接所指向的文件类型。Auticons 支撑.txt, .pdf, .doc, .exe和其他的一些格局,下面是.zip格局的一个例子,应用$=来决定href以甚么开头:

1 [href$=".zip"]:before,  2 [href$=".gz"]:before {3    content: '\E004'; /* unicode for the zip folder icon */4 }

组合

你知道如安在一个元素中添加多个类的办法来建立款式吧?很好,其实你可以用属性选择器来帮你主动完成这些任务。让我们来比较一下:

/* The CSS for the class approach */

.new-window-icon:after {
   content: '[new window icon]';
}

.twitter-icon:before {
  content: '[twitter icon]';
}

/* The CSS for the attribute selector approach */

[target="_blank"]:after {
   content: '[new window icon]';
}

[href*="twitter.com/"]:before {
  content: '[twitter icon]';
}

(留意,*=比较器的意思是“内容”,假设href的值包含字串twitter.com/,那么款式便会应当到该元素上)

<!-- The HTML for the class approach -->

<a href="http://twitter.com/heydonworks" target="_blank" class="new-window-icon twitter-icon">@heydonworks</a>

<!-- The HTML for the attribute selector approach -->

<a href="http://twitter.com/heydonworks" target="_blank">@heydonworks</a>

任何担任添加一个到Twitter 页面的超链接的内容编辑器,如今只须要知道两件事:URL和如安在新标签中翻开。由于属性选择器能赞助他们找到对应的超链接。

持续

还有一些没有推敲到的处所是:假设有一个不婚配任何属性选择器的链接呢?假设这个超链接是一个浅显的旧超链接呢?这个选择器是一个很轻易被记住的并且寻求性能极zhi的人会很情愿听到这类话“曾经没有其他比它还要更简洁了”。

层叠的属性选择器的持续性与和类层叠在一路的时辰是一样的。起首,它会对你的a添加款式 —— 假定是一个text-decoration: underline规矩来进步链接的可拜访性;然后应用你所供给的属性选择器来为照应的a元素进一步添加层叠的款式。像IE7 如许的浏览器其实不完全支撑伪元素。但由于持续的关系,链接照样会应用a选择器中的款式。

a {
  color: blue;
  text-decoration: underline;
}

a[rel="external"]:after {
   content: '[icon for external links]';
}

实际的按钮应当是真实的

鄙人面的部分,我们会详述我们这个CSS书签的构造来讲解代码上的缺点。在做这件事前,起首让我们来看看能够会有甚么蹩脚的选择器潜入我们的任务流程中。

OOCSS的信徒们依然保持应用类由于它们是可重用的,就像组件一样。是以,.button比#button更好。不过,我能想到更好的按钮款式的选择器。它的名字也很轻易记住。

The <buttonelement represents a button. – W3C Wiki

Topcoat是一个OOCSS的基于BEM的UI框架,来自Adobe。Topcoat中的各类各样的按钮款式代码逾越了450行,假设把注释块也加出来的话。外面的注释块建议我们用类似这个例子的方法来应用按钮的款式。

1 <a class="topcoat-button">Button</a>

这个不是一个button。由于,假设它是一个按钮,应当是应用<button>来做标签。实际上,在每个我们已知的浏览器中,假设应用<button>来表示一个按钮而不添加任何款式,它默许看起来也会像一个按钮。但下面这个例子不是的,由于它用的是<a>标签,本应当是代表一个超链接,实际上,它缺乏一个href,这意味着它乃至不算是一个超链接。在技巧上,它只是一个占位符,一个没有完成的不完全的超链接。


一只穿着沙鱼服装网www.vhao.net的小狗其实不是沙鱼

Topcoat的CSS中的示例仅仅是一个典范,但条件是类定义了元素并且HTML不是欺骗性的(你应当应用button标签而不是a标签来描述按钮)。再多的“成心义的断字”的类名添加也不克不及弥补你如许丑恶地应用非智能选择器和犯下的代码上的缺点。

更新:由于写了这篇文章,Topcoat.io 曾经应用<button>标签来代替下面那个例子。这的确太棒了!但是,我对它们应用.is-disabled类来指明这个按钮是禁用的而忽视了disabled属性持保存看法。你可以在评论区看到我和Topcoat 的代表在这方面的评论辩论。对与促进OOCSS 所带来的WEB标准的灾害,你可以在 semantic-ui.com中自行发明,它们示例中的“标准按钮”居然是一个包含空的<i>标签的<div>标签。

看见是么就是甚么

“假设它看起来像只鸭,泅水时也像只鸭,叫声也像只鸭,那么它能够是一只鸭。”

一个装潢得像按钮一样的链接,并且还能触发像点击按钮那样的Javascript 事宜,对很多人来讲,它是一个按钮。但是,这只意味着它曾经经过过程了前两个阶段的“鸭测试”。为了让一切的用户可以或许应用归结推理和辨别按钮,它也必须像这 样。由于它依然是一个链接,尽可能防止这类不须要的混淆,由于这类帮助技巧的应用者没有寻求一个语义但这又正好是我们应当承当的职责。

虽然如此,有些人照样保持用a作为按钮的标签。超链接是比较轻易完全重新地款式化的一个元素。假设选择a标签作为元素,那么只要一个办法让它接近真实的按钮。你猜对了:你必须应用WAI ARIA role 属性值来指明它的含义。可以仅仅经过过程以下的属性选择器来确认一个超链接由于某些缘由看起来像是一个按钮。

1 [role="button"] {2    /* semantic CSS for modified elements that are announced as “button” in assistive technologies */3 }

质量包管的属性选择器

“CSS赐与了class 属性强大年夜的力量,作者可以基于那些没有任何表示的元素(例如DIV和SPAN)在想象中设计他们的“文档说话”,并经过过程class 属性来付与他们款式信息。作者应当防止这类行动即使这类文档说话的构造元素常常取得大年夜家承认和接收它们的意义。” – “选择器,” CSS Level 2, W3C

我们具有a和 button两个元素的缘由是为了在语义上划分两种完全不合的功能交互。超链接代表着你将会去到的某个地位的符号,而按钮是作为事宜或许举措的触起源。一个是关于地位移动的,另外一个则是侧重于转换的。一个是促进离开的,另外一个是促进结合的。

为了确保我们不会做甚么愚蠢的任务来让我们的按钮和超链接产生混淆。我们会创建一个应用智能属性选择器的CSS书签并来测试两个元素各自的有效性和质量。

遭到Eric Meyer的文章的一点启发和从DiagnostiCSS 中获得了一些线索,这个款式表会结合属性选择器和:not选择器(或许非伪类) 来在HTML 中把成绩高亮出来。与其他的两种完成不合,它会应用伪元历来将缺点打印到屏幕上。每个缺点都邑采取漫画字体和粉白色的背景来显示。

经过过程把功能和表单连接起来,我们可以看到丑恶的HTML 会直接地招致丑恶的 CSS。这是设计师滥用文档带来的后果。测验测验一下把revenge.css保存到你的CSS书签中,并单击这个书签以在任何你爱好的页面触发它。留意:它不会在办事在https协定上的页面中起感化。

REVENGE.CSS
Drag to your bookmarks bar.

规矩1

假设它是个超链接,那它就应当有href属性。

a:not([href]):after {
   content: 'Do you mean for this to be a link or a button, because it does not link to anything!';
   display: block !important;
   background: pink !important;
   padding: 0.5em !important;
   font-family: 'comic sans ms', cursive !important;
   color: #000 !important;
   font-size: 16px !important;
}

留意:在这个例子中我其实不是要测试属性的值,而是测试这个属性能否有被设置,也就是说,[href]婚配的是任何含有href属性的元素。这个测试 仅仅实用于超链接。这个测试可以如许来懂得,“关于每个不具有href属性的元素,为


陕西印象信息技巧无限公司

接洽人  :刘经理

营业咨询:13379231619

办事监督:029-88412862

接洽地址:西安市南关正街中贸广场15号楼2单位9F

司法参谋:西安市方强律师事务所王继平律师

CopyRight © 版权一切: 陕西印象信息技巧无限公司 技巧支撑:陕西印象信息技巧无限公司 网站地图 XML 立案号:陕ICP备09025595号-1


扫一扫拜访移动端