details 和 summary 元素

曾几何时,我们创建可以显示/隐藏一些内容的小组件时,我们不得不使用Javascript.有时候你可能不得不为这个小功能,下载一个完整的 JS 库才能达到这个功能效果.为下面的时刻欢呼吧!HTML5提供了创建这种拖拽特点的方法,我们仅仅需要简单的几行html代码就能获得这种效果(从目前而言,这种效果还依赖于使用的浏览器,当然,在不久的将来,这可能不是问题).下面让我们一起来看看 <detail>元素.

下面就是规范中的描述

The details element represents a disclosure widget from which the user can obtain additional information or controls.

理论上我们可以用它创建那种折叠的小组件,用户可以有打开和关闭的交互.在<details>我们可以放入我们任何想放入的内容.

浏览器的支持情况

在我们开始之前,实际一点,让我们看看目前浏览器的支持情况,目前只有chrome支持 <details > 元素.Opera很快就会支持Opera will support it soon,让我们来用chrome演示这种效果吧.

<details 的使用方法

这里有两个相关的元素:<details>和可选的see this in action over at jsbin.这是一个简单的例子但是可以将效果完美展现的代码,没有任何Javascript.

OPen 属性

在上面的例子中,在页面加载的时候内容是隐藏的。我们可以将<detail>默认的视觉属性通过布尔值作修改,让其当我们加载页面的时候是展开的:

<details open>
  <summary>Show/Hide me</summary>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</details>

注意,这里并没有 closed 属性,因为只要你移除 open 属性,执行的就是 closed 属性效果。

<summary>元素
我们已经简要的看了

的作用。因为它是短语内容,我们可以使用内联 (inline)标签 <span;>。我们为什么会有这种想法呢?也许这样子能更方便的通过而外样式控制显示效果或者像 spec 建议的那样:为一个表单元素增加一个 <label>标签。如果他能生效的话,至少能让我很顺手:

<details>
  <summary><label for="name">Name:</label></summary>
  <input type="text" id="name" name="name" />
</details>

常理看,我们点击 summary 的任何位置都应该展开 <detail>元素的内容。但是在这个例子中,我们点击<summary>并没有展开内容,因为你点击的是<label>他会将焦点放到 <input>标签-即使那部分内容被隐藏在<details>标签。
很明显,在这点需要更好的声明,你认为这个地方应该发生什么事情呢?可能某个浏览器生产商能看一下这个效果。

<details>元素多层嵌套

你可以在<details>中嵌套<details>,可以完美的案例查看这个效果:

<details>
  <summary>Question 1</summary>
  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
  <details>
    <summary>Related documents</summary>
    <ul>
      <li><a href="#">Lorem ipsum dolor sit amet,  consectetuer adipiscing elit.</a></li>
      <li><a href="#">Aliquam tincidunt mauris eu  risus.</a></li>
      <li><a href="#">Lorem ipsum dolor sit amet,  consectetuer adipiscing elit.</a></li>
      <li><a href="#">Aliquam tincidunt mauris eu  risus.</a></li>
    </ul>
  </details>
</details>

使用案例

在哪些情况时会用到 <details>?FAQ表可能是我们最先涌现的想法。大家经常使用手风琴效果是用在FAQ列表,所以 <details> 是这一效果的最佳效果。
考虑到这一系列内容,它可能被固定在某一区域,当我们滚动内容的时候。像这样子?
你也可以使用<details>来操作博客的评论内容,用户简介,下载列表,复杂的表单,或者像规范中描述下面的应用:

An example of the <details> element from the spec

实际上,只要你看看我写的wordpress,会发现有大量的使用 <details>的机会。让我们在评论中了解一下你的观点和想法。

样式格式化

你如何对这个定义样式?同时,在webkit浏览器中我们可以使用伪类样式 ::-webkit-details-marker。你可以看到这个小的案例:

details summary::-webkit-details-marker {
  background: red;
  color: #fff;
  font-size: 500%;
}

我们也可以将这个小组件定位。这里是向右浮动的这就是我们初始化效果。
我们如何将默认的组件Icon自定义呢?那就是用 属性选择器 (attribute selector),你可以用来检测 <details>元素是打开的还是关闭的,然后为其定义一个合适的背景图片。我们咋下面的例子中作了一个类似的效果,使用 :after pseudo-element元素定义成我们喜欢的背景图片:

summary::-webkit-details-marker {
  display: none
}
summary:after {
  background: red; 
  border-radius: 5px; 
  content: "+"; 
  color: #fff; 
  float: left; 
  font-size: 1.5em; 
  font-weight: bold; 
  margin: -5px 10px 0 0; 
  padding: 0; 
  text-align: center; 
  width: 20px;
}
details[open] summary:after {
  content: "-";
}

在上面的例子中,我们使用文本 “+”和“-”来定义这个组件的状态,根据你的设计需要,你可能希望使用 :before来代替 :after,这两个为类元素都可以使用 image.
details的[open]属性选择器能创造很多有意思的可能性。因为我们是好医生,下面是我们装饰后的效果,下面是截屏效果:

Details element in Chrome
Styled <details> element in Chrome

如果我们可以用过css的动画效果来修饰打开和关闭时的状态,这样设计就更完美了,但是目前为止我们还没有办法做到这点。

可访问性

不幸的是在我们写这篇文章的时候,<details>h还无法通过键盘访问,Steve Faulkner 写到

Bottom line is, currently no keyboard support and no usable information exposed to assistive technology.

自己试一下,如果你使用鼠标打开 <details> 元素,你可以使用键盘到达内容部分,但是你无法使用键盘打开和关闭区域。所以目前这并不是理想状态,不过我们相信这个小国很快会被改进。

向后兼容

在我们抱怨其在IE6中无法生效之前,感谢这些聪明的人们,我们可以提供优雅的像狗兼容。这些效果也被列在下面的网站very handy collection of cross-browser polyfills,这两个都需要 jQuery:

<script>
  if (!('open' in document.createElement('details'))) {
    alert("No details");
  }
</script>

更新:感谢的评论。上面的代码并不是100%可靠,因为他在某些chrome版本下会失败。你可以使用this Modernizr snippet

我们为何使用这种类型的交互?

言归正传,为什么会有这个效果在HTML5中?就像其它HTML5的效果,使用这种效果能够更简单。比如时间选择,Date pickers, sliders, progress indicators, 现在这种手风琴效果就可以在不使用JavaScript的情况下更方便实施。谁能想到下一个是什么?如果是 tabs 标签那就好了。

总结

在这篇文章中,我们阐述了如何去使用<details>和<summary>元素。<details>是一个新元素,通过和<summary>元素通过浏览器可以创造手风琴的交互效果。

目前,<details>只能在 Chrome 工作,不过我们期待这会在不久的将来有所改变。这里只有一个css trick我们可以使用 ::-webkit-details-marker,但是我们拥有很多的其它css。让我们在评论中知道关于<details>元素你在这方面的经验和想法。

中文原文:details 和 summary 元素
英文原文:The details and summary elements
转载请注明以上信息,以表示对作者和译者的尊重,多谢!

在IE浏览器中打印HTML5元素 (IE Print Protector)

在IE浏览器中打印HTML5元素

IE浏览器的 6 7 8版本无法识别HTML5的新元素.IE 对待无法识别的元素将使用空的<section>和</section>空元素.这也意味着未知元素的内容也不会包含他们的内容,他们无法被定义样式和将溢出的内容包含到它本身的DOM节点中.
下面的这个例子,我们将用 article包含一个有些文字的标题和段落.

<article>
	<h1>
		Lorem ipsum
	</h1>
	<p>
		Dolor sit amet, consectetur adipisicing elit.
	</p>
</article>

因为IE浏览器将article解析成一个空元素,标题元素和段落都将溢出.

<article />
<h1>
	Lorem ipsum
</h1>
<p>
	Dolor sit amet, consectetur adipisicing elit.
</p>

IE Print Protector 的工作原理

将这些元素展现在视图里面.IE Print Protector 需要一个辅助工具,一小段 JS 代码,帮助IE浏览器支持这些HTML5标签.为了让这些标签元素能够打印出来,当打印的时候,IE Print Protector 临时的将 HTML5 元素作了替换,将其替换成可以支持的元素(比如 div 和 sapn).IE Print Protector 也会在已有样式表的基础上生成一个特殊的样式表,这也意味着你可以更保险的对他们定义样式通过 link,style和@import和 @media的方法.IE Print Protector 保存了页面的原始HTML5元素. 所有这些元素的表现和事件没有任何影响.

IE Print Protector 如何生效

未使用 IE Print Protector
IE 无法打印HTML5标签
使用 IE Print Protector
IE 打印HTML5标签的方法
下载IE Print Protector

IE Print Protector
Minified JS (1.29KB) (736 bytes gzipped)
Uncompressed JS (2.91KB)

项目地址:IE Print Protector

中文原文:如何让IE支持HTML5新元素的打印样式
项目地址:IE Print Protector
转载请注明以上信息,以表示对作者和译者的尊重,多谢!

如何让IE支持HTML5新元素

我们使用新的HTML5元素时,在其它浏览器中能表现良好的标签(比如Section,article,header和footer)对IE浏览器是个挑战.问题的原因来在IE浏览器的解析机制,这些不能不识别的标签元素导致文档对象的错误展现.
为了说明这个问题,请看下面的简短代码:

<body>
  <section>
    <p>This is an example</p>
  </section>
</body>

奇怪的是,在IE6-IE8都无法去解析 < section >标签,导致 Dom节点看上去是下面的样子:

  • BODY
    • SECTION
    • P
      • #text: This is an example
    • /SECTION

注意IE浏览器创建了两个空元素.一个是 section,另一个是 /SECTION.确实是这样的,它将不认识的结束标签作为一个开始标签.
这里有一个方便的方法解决这个问题,最早是由a comment by Sjoerd Visscher实现的.这个方法的最基础理念就是通过使用 document.createElement(tagName) 来创建未知的元素.IE 的解析器会识别出这些元素,将他们以更合理有效的方式解析展示出来.比如我们可以使用下面的这段代码:

document.createElement("section");

这样,上面的代码解析后就是下面的样子:

  • BODY
    • section
      • P
        • #text: This is an example

这个技术可以让IE6,IE7和Ie8对未知的元素解析.

为了方便起见,Remy Sharp写了一段可以让增强HTML5新元素展示的代码,你可以很方便的下载和使用它们.published a simple script

这段代码对其它浏览器,比如:Opera 9,Firefox 3 和 Safari 3对这些新元素的解析都默认就是正确的.虽然在Firefox2中也有一些问题,但这些问题还没有找到解决的办法.但是相比IE的更新速度,火狐这个并不算是问题.

这种方法创建的标签,我们无法应用于打印样式,如果想了解如果让IE打印样式正确,请查看下面的文章在IE浏览器中打印HTML5元素 (IE Print Protector)

中文原文:如何让IE支持HTML5新元素
英文原文:Supporting New Elements in IE
转载请注明以上信息,以表示对作者和译者的尊重,多谢!

HTML5 hgroup 元素使用概述

hgroup 是HTML5中新定义的元素,用来将标题和副标题群组。在我们已经有header标签的情况下,为什么我们还要一个<hgroup>标签?下面将是这个问题的解答

什么是 <hgroup>元素

下面是文档关于的描述 <hgroup>的描述:
hgroup一般被用作将一个或者更多的h1到h6的元素群组,比如,一个区块内的标题和它的副标题。

The hgroup element is typically used to group a set of one or more h1-h6 elements — to group, for example, a section title and an accompanying subtitle.
W3C Specification

这个表述代表着什么?

<hgroup>扮演着一个可以包含一个或者更多标题相关的容器的角色,这些标题可能在&ls;header>元素中。它只能包含从h1-h6的标题元素,这些标题可能是副标题、二选一的标题或者标记标题。

更简单的理解如何使用<hgroup>的方法,是我们通过一些例子。比如下面 Dr.Oli 的例子:

当article标签有且只有一个标题的时候:

<article>
 <h1>Article title</h1>
 <p>Content…</p>
</article>

当article标签有一个标题,并且还包含元数据的时候(meatadata)

<!-- Wrapping title and metadata in header -->
<article>
 <header>
 <h1>Article title</h1>
 <p>(<time datetime="2009-07-13">13th July, 2009</time>)</p>
 </header>
 <p>Content…</p>
</article>

当article标签有一组自我闭合标题的时候:

<!-- Title h1 and subtitle h2 in hgroup -->
<article>
 <hgroup>
 <h1>Article title</h1>
 <h2>Article subtitle</h2>
 </hgroup>
 <p>Content…</p>
</article>

一个article标签包含一个标题和副标题和元数据

<!-- A heading which uses header and hgroup -->
<article>
 <header>
 <hgroup>
 <h1>Article title</h1>
 <h2>Article subtitle</h2>
 </hgroup>
 <p>(<time datetime="2009-07-13">13th July, 2009</time>)</p>
 </header>
 <p>Content…</p>
</article>

我们为什么要使用<hgroup>?

我们用<hgroup>一切源起文档大纲(document outline).
当群组的标题在<hgroup>元素的时候,大纲的算法将会覆盖掉群组中低等级的标题,而将最高等级的标题作为大纲。下面的就是一个例子:

<header>
 <hgroup>
 <h1><a href="/">Mini Apps</a></h1>
 <h2>Web applications for iPhone, Android & other mobile platforms</h2>
 </hgroup>
</header>

<hgroup>包含h1-h2的标题元素,但是在大纲中只包含<h1>.就像下图展示的那样子。

我们可以从这个链接查看文档大纲:
http://gsnedders.html5.org/outliner/

总结:
我们刚刚讲的是如何高效的使用 <hgroup>元素。回顾一下:
.如果你只有一个标题元素(h1-h6中的一个),你并不需要<hgroup>.
.当出现一个或者一个以上的标题与元素时,适用<hgroup>来包围他们。
.当你的有一个标题有副标题或者其它的和section或者article有关系的元数据时,将<hgroup>和元数据放到一个单独的<header>元素容器中。

中文原文:HTML5 hgroup 元素使用概述
英文原文:Avoiding common HTML5 mistakes
转载请注明以上信息,以表示对作者和译者的尊重,多谢!

如何避免 HTML5 的常见误区

在这篇文章中,我将给大家分享html5构建页面的小错误和不好的实践方法,让我们在以后的工作中避免这些错误。

不要把 <Section> 当成容器来定义样式

我们经常看到的一个错误,就是武断的将<div>标签用<section>标签来替代,特别是将作为包围容器的<div>用<section>来替换。在XHTML或者HTML4中,我们将会看到类似下面的代码:

<!-- HTML 4-style code -->
<div id="wrapper">
  <div id="header">
    <h1>My super duper page</h1>
    <!-- Header content -->
  </div>
  <div id="main">
    <!-- Page content -->
  </div>
  <div id="secondary">
    <!-- Secondary content -->
  </div>
  <div id="footer">
    <!-- Footer content -->
  </div>
</div>

现在我看到了下面的代码样子:

<!-- Don’t copy this code! It’s wrong! -->
<section id="wrapper">
  <header>
    <h1>My super duper page</h1>
    <!-- Header content -->
  </header>
  <section id="main">
    <!-- Page content -->
  </section>
  <section id="secondary">
    <!-- Secondary content -->
  </section>
  <footer>
    <!-- Footer content -->
  </footer>
</section>

直观的看,上面的例子是错误的:<section> 并不是一个容器.<section>元素是有语意的区段,帮助构建文档大纲。它应该包含标题。如果你要寻找一个可以包含页面的元素(不论是 HTML 或者 XHTML ),通常的做法是直接对<body>标签定义样式就像Kroc Camen描述的那样子,如果你还需要额外的元素来定义样式,使用<div>,就像Dr Mike 阐述的那样, div并没有灭亡,如果这里没有其它更合适的,div可能是你最合适的选择。

记住这点,这里我们重新修正了上面的例子,通过使用两个新角色。(你是否需要额外的<div>取决于你的设计。)

<body>
  <header>
    <h1>My super duper page</h1>
    <!-- Header content -->
  </header>
  <div role="main">
    <!-- Page content -->
  </div>
  <aside role="complementary">
    <!-- Secondary content -->
  </aside>
  <footer>
    <!-- Footer content -->
  </footer>
</body>

如果你还是无法确定哪一个元素更适合使用,我建议你去查看HTML5 sectioning content element flowchart来让你继续前行。

只在需要的时候使用 <hgroup>和<header>标签

使用标记的时候写入了一些并不需要的现象这是不合理的。不幸的是,经常发现大家在并不需要的地方使用<header>和<hgroup>标签。你可以跟进我们关于<header>和<hgroup>的最新进展,下面是我的简单归纳:

  • <header>元素通常是通常作为一组解释或者导航辅助工具,通常包含section的标题.
  • <hgroup>元素会将当有副标题\子标题,各类标识文字时,对<h1>到<h6>标题进行群组,将其作为section的标题.

过度使用的<header>

你肯定知道,在一个文档中,可以使用多次<header>标签,下面就是一种很受大家欢迎的模式:

<!-- Don’t copy this code! No need for header here -->
<article>
  <header>
    <h1>My best blog post</h1>
  </header>
  <!-- Article content -->
</article>

如果你的<header>标签只包含一个标题元素时,就不要使用<header>标签了.<article>标签肯定会让你的标题在文档大纲中显现出来,而且因为<header>并不包含多重内容(就像定义中描述的那样子),我们为何要增加而外的代码呢?应该像下面这样简单才可以:

<article>
  <h1>My best blog post</h1>
  <!-- Article content -->
</article>

<hgroup>不合理使用

在标题的这个主题上,经常看到使用<hgroup>的错误案例.在下面这种情况下你不能将<header>标签和<hgroup>标签一起使用:

  • 这里只有一个标题,
  • 或者<hgroup>本身就够了(比如:不需要<hgroup>)

第一种情形看上去是下面的样子:

<!-- Don’t copy this code! No need for hgroup here -->
<header>
  <hgroup>
    <h1>My best blog post</h1>
  </hgroup>
  <p>by Rich Clark</p>
</header>

这种情况下,将<hgroup>移除,只保留标题就好.

<header>
  <h1>My best blog post</h1>
  <p>by Rich Clark</p>
</header>

第二种情况也是包含了他们并不需要的标签.

<!-- Don’t copy this code! No need for header here -->
<header>
  <hgroup>
    <h1>My company</h1>
    <h2>Established 1893</h2>
  </hgroup>
</header>

当<header>标签的子元素只有<hgroup>的时候,为什么我们还需要一个额外的<header>?如果没有额外的元素放到<header>中(比如<hgroup>的兄弟元素),我们直接将<header>元素去掉就好.

<hgroup>
  <h1>My company</h1>
  <h2>Established 1893</h2>
</hgroup>

不要将所有的链接列表都放到<nav>标签

在HTML5新增的30个元素中(在我们写这篇文章的时候),我们在构建更具语义\结构化的标签的时候,我们的选择变得太丰富.也就是说我们对现在给我们提供的这些超级有语义的标签,我们可能会滥用.<nav>就是一个很悲剧的例子.在规范中的描述是这样的:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Note: Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.
WHATWG HTML spec

这里面的关键词是”重要”导航.我们可能会对”重要”有不同的定义,但是我的理解是:

  • 主要导航
  • 网站搜索
  • 二级导航(这个能是有争议的)
  • 页面内链接(比如一篇很长的文章)

虽然并没有对错之分,但根据我的理解和一个民意投票让我觉得在下面这些情形下,我不会使用<nav>标签:

  • 翻页
  • 社交类的链接(虽然有些社交类的链接也是主要的链接,比如关于我About me和品味Flavours
  • 博客文章的标签
  • 博客文章的分类列表
  • 第三级导航
  • 大页脚

如果你不能确定是否使用<nav>,那就先对你问一下下面的几个问题:“者是否是一个主要链接?”,你可以根据下面的几个因素来回答你刚才的问题:

  • 如果用<section>和标题标签能够解决你的问题,那就不要去使用<nav>–Hixie on IRC
  • 你是不是为了增加可访问性而增加的一个快捷跳转链接呢?

如果上面的回答都是“不”,那可能就不适合使用<nav>.

<figure>元素的错误

<figure>和经常与它合伙作案的<figcaption>,是很难掌握的标签,下面是经常看到的一些小错误。

并不是所有的图片都是figure(注:比较难理解阿,image=图片,figure=图形)

之前,我曾经说过不要写那些不需要的标签。这个错误也是相同的。我经常看到一个网站上的每张图片都有<figure>标签。这些额外增加的标签并不会给你带来任何的益处,并且还增加了你自己的工作强度和让自己的内容变得更难理解。

在规范中关于<figure>的解释如下:“某些流内容,可以有标题,自我包含并且通常作为一个单元独立于内文档流之外。”在那里有完美的表述,就是它可以被从主内容中移除–比如放到边拦,而对文档流没有影响。
如果仅仅是一张表现类的图片而且和文档中其他的内容没有关系的话,那就不需要使用<figure>.”这张图片需要对上下文的内容作出解释吗?”,如果答案是”否”,那就可能不是<figure>(可能是<aside>),”我能把它移到附录里面吗?”,如果这两个问题的答案都是”是”,那就可能是<figure>.

你的标志不是一个<figure>

将上面的延伸开来,对你的logo也是这样。下面是两组我找到的有规律的代码片断:

<!-- Don’t copy this code! It’s wrong! -->
<header>
  <h1>
    <figure>
      <img src="/img/mylogo.png" alt="My company" class="hide" />
    </figure>
    My company name
  </h1>
</header>

<!-- Don’t copy this code! It’s wrong! -->
<header>
  <figure>
    <img src="/img/mylogo.png" alt="My company" />
  </figure>
</header>

这里就不需要说啥了,这是很明显的错误,可能你认为我们说的是不是将logo放在H1标签里面,但是我们在这里并不讨论这个问题。让我们迷惑的是<figure>元素。<figure>标签只用在当有上下文需要说明或者被<section>包围的时候。我这里要说的是你的logo可能很少会被这种情况下使用。很简单,那就不要去这样做,你需要的仅仅是下面的样子。

<header>
  <h1>My company name</h1>
  <!-- More stuff in here -->
</header>

figure只能用在标签上的误解

另一个对<figure>的误解就是我们通常认为它只能用在图片上面。事实上并不是这样子的,它可以被用在 <video><audio>, 一个图标 (比如<SVG>, ), 一个引用, 一个表格, 一段代码, 一段散文, 或者任何和这些相关的组合. 不要把你的<figure>标签仅仅局限在图片上。我们网页制作师的任务就是用标签更准确的描述内容。
这里有一篇更深入讲解 <figure>的文章I wrote about <figure>,很值得阅读的。

不要去使用那些不必要的type属性

这可能是我们最常见的一些问题,它们并不是真正的错误,但我觉得我们的最好实践还是尽量避免这种模式。
在HTML5中,我们并不需要给<script>和<script>增加 type 属性,如果这些从CMS默认添加的内容中移出是很痛苦的事情,那当你手工编码的时候还写入它们或者你能完全的控制你的模板时候你完全可以删掉它们。因为所有的浏览器都会将<script>解析成Javascript和<script>标签是CSS,你不再需要那个type属性了:

<!-- Don’t copy this code! It’s attribute overload! -->
<link type="text/css" rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/scripts.js"></script>

现在我们可以写成下面的样子:

<link rel="stylesheet" href="css/styles.css" />
<script src="js/scripts.js"></script>

你也能够对编码的设置作出省略。Mark Pilgrim在Dive into HTML5的语义化一章中作出了解释。

不要包含错误的标单属性

你可能发现<html5>引入了很多新的表单属性。现在我就给大家讲讲一些不合适的使用。

布尔值属性

新引入的标签属性有几个是布尔类型的,它们的标签行为基本接近。这些属性包括:

  • autofocus
  • autocomplete
  • required

坦白的说,下面的这种情况对我来说并不常见,但我们从 required 作为例子,如下:

<!-- Don’t copy this code! It’s wrong! -->
<input type="email" name="email" required="true" />
<!-- Another bad example -->
<input type="email" name="email" required="1" />

基本上看,这段代码并不会带来危害。客户端对 HTML的解析遇到 required 标签属性时,他的功能就会生效。但是当我们将代码修改,录入 required=”false” 的情况呢?

<!-- Don’t copy this code! It’s wrong! -->
<input type="email" name="email" required="false" />

解析的时候依然会遇到 required 属性,虽然你希望加入的行为是 假,它依然会被解析成 真。
这里有三种合理的方法让布尔值生效。(第二种和第三种方案只有你在写 XHTML 解析的时候需要)

我们上面的例子可以写成下面的样子:

<input type="email" name="email" required />

总结
对我来说,我无法将所以得蹩脚的代码模式都展示在这里,但是上面说的这些都是我们经常遇到的。

中文原文:如何避免 HTML5 的常见误区

英文原文:Avoiding common HTML5 mistakes

转载请注明以上信息,以表示对作者和译者的尊重,多谢!

伪类元素之美

通过使用:before和:after,你能创作出让人称奇的视觉效果。对页面中的每个元素,你都有两个额外的可以控制的元素,本来这些是需要额外的元素来实现。他们给设计带来了更多的趣味性的空间,而不是增加无语义的有负面影响的标签。这里给大家整理了一堆让人称奇的东西。让我们开始吧! Continue reading “伪类元素之美”

关于三角形的制作方法

三角形我们经常用在列表、下拉提示、面包屑导航的位置,给用户以导向的引导作用,比如,在有下拉列表的地方,我们可以用向下的箭头,在列表的时候,我们能告诉用户每个列表项和下一个列表项的关系,当在面包屑导航中,能让用户了解他现在所处的栏目或者频道。我们有哪些方法来实现它呢,下面我根据我们的实际工作中的经验作了简单的总结。

第一种方案,我们可以通过使用背景图片的方式来处理,这也是我们最经常用的方法。
1)单个切出三角形,我们可以根据UI设计的需求,切出与之相适应的图片,比如 ,我们能方便的根据需求,制作不同高度和颜色的三角形。在使用方面,HTML代码和CSS代码相对简单。如下面图是示例:

这种直接使用背景图片的方法适合我们在三角形包含渐变、纹样、肌理等特殊效果的时候,我们可以设置它的颜色来保证图形边缘与背景色完美一致。缺点是我们需要为每个不同的方向需求制作一个图片,增加了http请求和CSS代码的数量。
由于这种方法比较简单,我们就不做演示了.
2)相比之前,我们怎么做到减少http请求,同时也标示出四个方向的三角形呢?我们可以制作一个菱形 ,通过使用CSS的背景定位来选择与之相匹配的形状。这样我们就能用一个图形,达到四个图形的目的。

<div style="width:100px;height:100px;position:relative;margin:34px;background:#6699FF">
	<em style="background:url(http://varhi-wordpress.stor.sinaapp.com/uploads/2011/01/triangular_4.gif) no-repeat 0 0;width:67px;height:34px;display:block;position:absolute;top:-34px;left:15px"></em><em style="background:url(http://varhi-wordpress.stor.sinaapp.com/uploads/2011/01/triangular_4.gif) no-repeat -35px 0;width:34px;height:67px;display:block;position:absolute;right:-34px;top:15px;"></em>
    <em style="background:url(http://varhi-wordpress.stor.sinaapp.com/uploads/2011/01/triangular_4.gif) no-repeat 0 -35px;width:67px;height:34px;display:block;position:absolute;bottom:-34px;left:15px;"></em>
    <em style="background:url(http://varhi-wordpress.stor.sinaapp.com/uploads/2011/01/triangular_4.gif) no-repeat 0 0;width:34px;height:67px;display:block;position:absolute;left:-34px;top:15px;"></em>
</div>

3)方法二种的方法虽然我们可以实现调用一次背景图片标示四种三角状态的情况,但是在颜色方面确实单一的,我们只能由一种颜色,那我们需要增加三角形同样在激发鼠标悬浮伪类响应的时候,我们应该怎么做呢?比如鼠标悬浮的时候由红色变成橙色?那我们就可以使用这种方法,通过正负形的方法,方法二中的方法我们通过一个正形,那下面的例子我们使用一个负形

HTML文件

<div style="width:100px;height:100px;position:relative;margin:34px;background:#6699FF">
    <a class="n_a_1"></a>
    <a class="n_a_2" ></a>
    <a class="n_a_3" ></a>
    <a class="n_a_4"></a>
</div>

CSS文件

.n_a_1,.n_a_2,.n_a_3,.n_a_4{background-image:url(http://varhi-wordpress.stor.sinaapp.com/uploads/2011/01/negative_4.gif);background-repeat:no-repeat;position:absolute;display:block;}
a.n_a_1{background-color:#0033CC;background-position:0 0;width:67px;height:34px;top:-34px;left:15px}
a.n_a_1:hover{background-color:#db0085}
a.n_a_2{background-color:#0066CC;background-position:-33px 0;width:34px;height:67px;right:-34px;top:15px;}
a.n_a_2:hover{background-color:#db0085}
a.n_a_3{background-color:#00CCCC;background-position:0 -33px;width:67px;height:34px;bottom:-34px;left:15px;}
a.n_a_3:hover{background-color:#db0085}
a.n_a_4{background-color:#00FFCC;background-position:0 0;width:34px;height:67px;left:-34px;top:15px;}
a.n_a_4:hover{background-color:#db0085}

这样子,我们就能很方便的改变背景颜色来获得不同的颜色的三角形了。
但是我们也发现了另一个问题,那就是当我们希望把这个三角形放到有颜色的背景时,构成其负形的区域颜色也会成为我们的限制,因为我们必须将构成负形的颜色与之相匹配。而且第二种方法和第三种方法中只能实现固定尺寸的正三角形,如果我们想随时改变它形状的话,不使用css3的背景大小属性background-size话(此属性已经已经被Opera\firefox\Safari\Chrome\IE 9),可能下面的方法更适合。

第二种方案,我们不是通过图形图片的方式,而是直接使用标签本身的css属性特点或者字符来进行创作.
1)我们可以使用border 属性来实现,border属性包括宽度、颜色、样式。我们可以改变它的颜色来适应。通过下图我能就能分析出,border属性相关特点:

相关代码:

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    <!--
        #boder_arrow{border-width:20px;border-color:#ff6699 #ff3366 #cc0066 #990033;border-style:solid;width:0;height:0;line-height:0; }
    -->
    </style>
    </head>
<body>
    <div id="boder_arrow"> </div>
</body>
</html>

我们可以改变border不同方向的颜色来找到我们需要的颜色,我们甚至可以通过border-width的修改,创造不同角度的三角形.

是不是上面的通过修改border-width后获得的上面的零件很有意思,可以让我们轻易的节省为创造三角型用掉的那个宝贵的 http请求。
巧思无难事,可能有时候你需要的并不是一个等腰的三角型,比如说我们常见到下面这种图形

那个不是等腰三角形的图形,我们也能通过改变边框的宽度来得到:

<div style="border-color: transparent #FF6699 transparent transparent;border-style: solid;border-width: 0 30px 20px 0;height: 0;line-height: 0;width: 0;"></div>

2)通过旋转块状标签角度的方法获得,这种方法需要支持css3属性transform的浏览器支持.
我们经常需要这样的形式:

那我们对这个图形进行分解

那我们先来实现上面分解的图形:

当我们将旋转后的正方形的背景色色值设置为相交盒形相同的色值时,他们就融为一体了.

3)通过◆字符实现.实现方法与上面的类似,将字符的颜色设置为和希望表现得容器相同的颜色,从而得到一个视觉上的三角形.只是这次我们没有用到CSS3的transform属性,兼容性更好一些。

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="author" content="rage" />
    <title>符号三角</title>
    <style>
    <!--
    .wrap_char{width:150px; height:150px; text-align:center; margin:100px; background:#ccc; position:relative;}
    .a_char,.b_char,.c_char,.d_char{font-size:50px; text-align:center; color:#ccc; position:absolute; z-index:10;line-height:0;line-height:50px;}
    .a_char{left:-4px;bottom:-25px;}
    .b_char{left:-25px; top:-4px;}
    .c_char{top:-25px;right:-4px;}
    .d_char{right:-25px; bottom:-5px;}
    </style>
</head>
<body>
    <div class="wrap_char">
        <span class="a_char">◆</span>
        <span class="b_char">◆</span>
        <span class="c_char">◆</span>
        <span class="d_char">◆</span>
    </div>
</body>
</html>

案例研究:
1)线形的三角形,如下图:

这种图形的实现我们经常依赖于图形实现,其实我们可以通过border属性,将两个三角型的叠加就可以获得相应的效果:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>三角形叠加</title>
    <style type="text/css">
    <!--
    .pos_rel{position:relative;_line-height:0;} .pos_rel .icon1{display:block;border-width:9px 9px 9px 0;border-color:transparent #1c7ecf transparent transparent; border-style:solid;position:absolute;left:0;top:0;width:0;height:0;} .pos_rel .icon2{display:block;border-width:9px 9px 9px 0;border-color:transparent #fff transparent transparent; border-style:solid;position:absolute;left:4px;top:-9px;width:0;height:0;} --> </style>
</head>
<body>
    <div class="pos_rel"> <span class="icon1"><span class="icon2"></span></span> </div>
</body>
</html>

这样我们就能获得更漂亮的回复窗口:

2)导航状态

我们也可以通过border创造的三角形来实现:

HTML代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标示导航状态</title>
<style type="text/css">
	#nav_state{height:20px;}
	#nav_state a{width:80px;display:block;text-align:center;padding:2px;line-height:18px;;float:left;background-color:#ccc;margin-right:5px;color:#333;position:relative;text-decoration:none;font-size:12px;}
	#nav_state a span{display:none;}
	#nav_state a.current,#nav_state a:hover{background-color:#000;color:#fff;}
	#nav_state a.current span,#nav_state a:hover span{display:block;width:0;height:0;border-width:8px;border-style:solid;border-color:#000 transparent transparent;position:absolute;top:20px;left:32px;overflow:hidden; }
</style>
 </head>
 <body>
 <div id="nav_state">
 	<a href="#" charset="current">标签一<span></span></a> <a href="#">标签二<span></span></a> <a href="#">标签三<span></span></a> <a href="#">标签四<span></span></a>
  </div>
</body>
</html>

上面我们实现的是固定宽度,那如果是自适应宽度的、箭头朝上的呢?

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航箭头朝上标示符</title>
<style type="text/css">
#menu_liquid{height:30px;margin:20px; list-style:none;font-size:12px;} #menu_liquid li{height:30px;line-height:30px;float:left;white-space:nowrap;} #menu_liquid li a{display:block;float:left;height:30px;position:relative;padding:0 12px;background:#777;color:#fff; text-decoration:none;border-right:1px solid #ccc;} #menu_liquid li a span{display:none;} #menu_liquid li a.current,#menu_liquid li a:hover{ background:#000;color:#0099FF;} #menu_liquid li a.current span,#menu_liquid li a:hover span{display:block;width:0;height:0;border-style:solid;border-color: transparent transparent #f0f0f0 transparent;border-width:0 8px 8px;position:absolute;bottom:0;left:50%;margin-left:-4px;overflow:hidden;z-index:0;} #menu_liquid li a em{display:block;text-align:center;font-style:normal;cursor:pointer;}
</style>
</head>
<body>
    <ul id="menu_liquid">
        <li><a href="#"><span></span><em>首页</em></a></li>
        <li><a href="#"><span></span><em>二级栏目</em></a></li>
        <li><a href="#"><span></span><em>三级栏目可能会比较长</em></a></li>
        <li><a href="#"><span></span><em>四级栏目</em><span></span></a></li>
    </ul>
</body>
</html>

这里我们要注意的是什么呢?那就是箭头是绝对定位的,小心箭头过大的时候,将上面的文字覆盖掉了。

上面的只是一些方法的总结,可能并不是最优的方法,最优的实现方法可能还需要具体问题具体分析,就当在此抛砖引玉了。
同时欢迎大家提出相左的看法。

CSS减肥工具 — CSS Usage

前端构建工程师经常会遇到随着网站产品的规模扩大、产品数量、日常专题上下线等情况,造成网站的CSS慢慢变得臃肿从而影响了网站的用户体验,这种情况下,给网站CSS文件减肥类似于海底捞针的大工程,因为稍不留神,一个不经意的删除,就会造成线上的产品的事故。下面我们就给大家推荐一款CSS减肥的工具–Firefox插件 CSS Usage.

首先,我们需要安装Firefox(猛击此处下载),或者确定你已经安装的版本已经高于3.1;
第二步,安装前端开发人员最普及的开发工具 Firebug
第三步,安装CSS Usage 0.2.2(写此文时的版本);
第四步,在浏览器中打开我们要优化的页面(本地的页面也可以),点击右下角的firebug小图标,打开firebug工具窗口,我们会看到在工具选项中我们有一个 CSS Usage工具的按钮。


首先我们来分析最上面的三个功能按钮的使用

Scan: 通过字面意思我们就能知道,这是一个扫描当前页面的工具,如果我们的站点只有一个页面或者几个页面,我们可以通过使用此功能按键来查看页面的css实用情况.

Clear: 清除扫描结果,但我们查看完网页,并对CSS 进行了修改后,我们就不需要以前的扫描结果了,那么我们就可以使用Clear功能键,清除以前的扫描结果缓存,重新开始我们的扫描.

AutoScan: 我们的网站可能会有很多的页面,更有可能有很多的弹出层,如果我们每次都点击扫描的话,会占用我们大量的时间,AutoScan功能键可以使我们的扫描工作更自动化,提高我们的工作效率.

当我们点击Scan按键后会有什么样的情况呢?我们以 独臂老宋的博客为案例http://blog.sina.com.cn/laosong11
点击Scan之后, CSS Usage会对当前的页面HTML和样式进行扫描,如下图

上图是我把扫描结果折叠后的样子,我们可以看到,CSS Usage对页面css样式表的内联(inline)样式和外链样式进行了扫描,HTML也作了扫描并显示加载时间.

下面我们展开一个内联样式

我们能看到这一句Line CSS Selector Seen, Seen before, Unseen, :hover,告诉我们” 列出CSS选择器的状态:
绿色–表示当前扫描看到的,
深绿色–的以前的扫描中看到的,
红色–的表示在当前和以前扫描中均未发现的.
灰色–的代表伪类的选择器CSS,这部分将会被忽视.
在这个列表的最下面,我们也会看到有个统计,告诉我们有多少被发现,多少没有发现,被忽视的是多少,CSS实用的覆盖率是多少的统计.

同时,CSS Usage还提供给我们关于CSS某个选择器被实用多少次的统计

如果我们一直使用 Auto Scan功能的话,我们的Scan次数也是在累积的,比如我们从首页到博文目录、再到图片、最后到达关于我,每一次页面跳转,CSS Usage 都会自动增加页面的扫描次数。如下图:

如果你想知道,我们都是在哪些页面进行的扫描,是不是覆盖到了所有的页面,你可以看到关于页面的扫描记录

如果我们仅仅是给CSS减肥的话,那我们就可以对红色的选择器开始动手了,CSS Usage给我们提供了一个更智能的工具, export cleaned css(导出清理后的CSS).但是直接使用这个工具对很多大型网站来说都需要勇气,我的建议还是保险一些的好,我们可以选择选择器的名称,通过文件夹的搜索功能,来查找这个css选择器的样式是不是已经作为下线 产品或者组件的组成部分,已经没有作用.或许我们在一个旮旯又 发现了它 ,那样我们只是当时出了冷汗,而不必等修改的文件上线后再出冷汗.

我们还要提一下这个工具的缺点:
如果网站使用了大量的ajax和dhtml的话,你需要尽可能多地打开那些隐藏的div/窗口和tab,让Css Usage爬取尽可能多的内容。
如果我们的网站页面数量很多的话,占用CPU和内存会比较大,需要足够的耐心。

我们本文只是介绍了关于移除无效CSS选择器 的方法,如果你想更全面的提升网站的速度,那么你可能需要结合Firebug\ Yslow\ Page Speed 组合应用,找到更优答案.

顺便推荐几款在线的CSS减肥工具:
CSS Validation Service http://jigsaw.w3.org/css-validator/
Css Optimiser http://www.cssoptimiser.com/
Clean CSS http://www.cleancss.com/
CSS Compressor http://www.cssdrive.com/index.php/main/csscompressor

原文:CSS减肥工具 — CSS Usage
转载请注明以上信息,以表示对作者和译者的尊重,多谢!

35款高质量的免费电子商务模板

对于一个准备实施电子商务(e-commerce)的站长来说,这里有太多的系统选择来驱动网站和添加购物车功能。选择哪一种方案,这将取决于你的功能需求的设计来作出决策。当然,商业定制解决方案是大家通常会做出的选择,但是对于希望较少开支的的站长来说,选用模板是最佳的选择。优质的电子商务模板很容易不找到,但是通常价格都比较贵,免费的模板不好找,高质量的模板就更难找到了。

我们现在已经为你做了这方面的调查,在这篇文章中我们为您提供了35款高质量的免费电子商务模板,这些模板针对WordPress, Prestashop, osCommerce, Magento, Zen Cart, CubeCart, 和 CRE Loaded,还有一系列的通用的电子商务通用模板。请注意我们并不是希望你原封不动的使用这些模板,而是希望你能把他们作为电子商城的骨架,来减少你的开发时间,否则你不得不从草稿开始。

1. WordPress模板

Crafty WordPress Theme | Demo | 下载

varhi收集分享Crafty 35款高质量免费模板

WordPress e-Commerce Plugin | 下载

varhi收集分享Inst 35款高质量免费模板

2. Prestashop 免费模板

CleanBlue

varhi收集分享Theme 35款高质量免费模板

et-black

varhi收集分享Th2 35款高质量免费模板

PrestaThemes
PrestaShop一系列的高质量免费模板。

3. osCommerce 免费模板

Footwear | 下载

varhi收集分享 鞋 35款高质量免费模板

Appliance | 下载

varhi收集分享Appliance 35款高质量免费模板

Cosmetics Store | 下载

varhi收集分享varhi收集分享Cosmetics 35款高质量免费模板

电脑商城模板 | 下载

varhi收集分享Computeros 35款高质量免费模板

4. Magento 免费模板

Modern Theme | 从Magento下载

varhi收集分享Modern 35款高质量免费模板

蓝色 | 从Magento下载

varhi收集分享Blueskin 35款高质量免费模板

Telescope Theme | 从Magento下载

varhi收集分享Telescope 35款高质量免费模板

Pet Store Theme | 从Magento下载

varhi收集分享Pet 35款高质量免费模板

Free Magento Theme from Template Monster | 下载

varhi收集分享Monster 35款高质量免费模板

Electronics Store 3 | 从eCommerce-Themes下载

varhi收集分享Elec3 35款高质量免费模板

5. Zen Cart 免费模板

Free Zen Cart Template | 下载

varhi收集分享Zentemp 35款高质量免费模板

Acadame | Download from ichoze.net

varhi收集分享Acadame 35款高质量免费模板

Clothes Online | 下载

varhi收集分享Clothes2 35款高质量免费模板

6. CubeCart 免费模板

LiteFree

varhi收集分享Cube 35款高质量免费模板

Clean Blue
三款免费的CubeCart 3 皮肤. 更多免费Cubecart皮肤.

varhi收集分享Ch3 35款高质量免费模板

7. CRE Loaded 免费模板

Electronics Store | 下载

varhi收集分享Cre-elec 35款高质量免费模板

Clothes Store | 下载

varhi收集分享Clothes5 35款高质量免费模板

8. General E-Commerce 免费模板

下面的模板是为电子商务设计的但是他可能并不适合你的电子商城系统. 如果你想使用他们, 这需要去改进和结合到你选择的 e-commerce 系统中。 这些模板都符合HTML规范。

Tool Shop | 下载 (HTML 验证通过)

varhi收集分享Toolshop 35款高质量免费模板

Pet Shop | 下载 (HTML 验证通过)

varhi收集分享Petshop 35款高质量免费模板

Auto Parts | 下载 (HTML 验证通过)

varhi收集分享Autoparts 35款高质量免费模板

Clothes Collection | 下载

varhi收集分享Clothes 35款高质量免费模板

Gadgets Template | 下载 (HTML 验证通过)

varhi收集分享Gadgets 35款高质量免费模板

Online Movie Store | 下载 (HTML 验证通过)

varhi收集分享Movies 35款高质量免费模板

Books Online | 下载 (HTML 验证通过)

varhi收集分享Books 35款高质量免费模板

Beauty Company | 下载 (HTML 验证通过)

varhi收集分享Beautyco 35款高质量免费模板

Clothes Store | 下载

varhi收集分享Clothes4 35款高质量免费模板

Hardware Store | 下载

varhi收集分享Hardware 35款高质量免费模板

Online Store | 下载

varhi收集分享Onlinestore 35款高质量免费模板

Computer Store | 下载

varhi收集分享Compterstore 35款高质量免费模板

Mobile Phone Shop | 下载

varhi收集分享Mobilephones 35款高质量免费模板

Hi-Fi Technics Store | 下载

varhi收集分享Hifi 35款高质量免费模板

Electronics Store | 下载

varhi收集分享Electronics 35款高质量免费模板

中文原文:35款高质量的免费电子商务模板
英文原文:35 Free High-Quality E-Commerce Templates
转载请注明以上信息,以表示对作者和译者的尊重,多谢!