如何設計出正確語意的 HTML5

轉自Blog.XDite.net

 

常見錯誤

錯誤 1:把 section 當成普通容器元素

與其將題目定為「如何設計出正確語意的 HTML5」,經過接近兩週的翻修 HTML 工作與研讀 HTML5 Spec 之後,我想本文主旨更貼近的是「如何避免設計錯誤語意的 HTML5」。

middleman 產生的 layout.html.erb (最外圍的容器)  範例是

    <section id="main" role="main">
      <%= yield %>
    </section>

這也是最 common 的 mistake。

請注意: “section" 並不是容器。

更明白的說:

  • section 是「一段」有意義的內容。
  • 如果你必須要使用 section 的話,它必須要有 heading
  • 如果你需要容器的話,請回去使用 div

錯誤 2:把 header 當成容器元素

header 可以使用在多處,標示為一段文件、一篇文章或者是一頁文件的標題。但是常見的一個設計錯誤是將 header 當做一段 header 「容器」。舉例來說:

    <header id="header">
       # A LOT OF CODE HERE
       <h1> first heading <h1>
       <nav> foo </nav>
       <p> bar </p>
       <h2> second heading </h2>
    </header>

header

  • 並不是一段 sectioning content
  • header 並不會 follow outline algorithm

如果你需要一個 header 「容器」,請使用 div。維持 header 內的單純。

錯誤 3: 將看得到的「列表」元素都包上 nav

nav 這個元素是「導航」的意思。表示這一段文件、一篇文章、一頁文件的導航 Link。也就是

  • 該站導覽 bar
  • 次專區導覽 bar
  • 文件導覽 bar

都適合使用用 nav 標記

常見錯誤的設計是將看的見的 ul li 外面都包上一層 nav。

根據定義:

a section of navigation links, either to other pages (site navigation) or to sections on the same page (eg a table of contents for long articles). This is for primary navigation blocks, not just for any group of links.

Don’t use <nav> unless you think <section> would also be appropriate, with an <hx>

所以以下這些元素是不適合用 nav 標記的:

  • 分頁標記
  • social link
  • TAG 與 Categories

當然,我見過最離譜的設計是這樣的:

    <header id="header">
       # A LOT OF CODE HERE
       <nav id="user-navigation">
        <ul>
          <li> 登入</li>
          <li> 註冊 </li>
          <li> 關於本站 </li>
        </ul>
       </nav>
    </header>

這一段 code 其實需要用 div 全部重寫。

常見誤區

另外則是一些模糊誤區。

誤區 1 :以為只有 sidebar 才適用 aside

aside 的定義是:

a section of a page that consists of content that is tangentially related—but separate—to the surrounding content. In print this would be a sidebar, pullquote or footnote.

也就是跟主文沒那麼相關的都可以扔 aside 啦。

誤區 2 : 搞不清楚何時該使用 article / section / div ?

以下是它們的定義

  • article : An article is an independent, stand-alone piece of discrete content.

  • section : on the other hand, isn’t “a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable”. It’s either a way of sectioning a page into different subject areas, or sectioning an article into … well, sections.

  • div : is only a block of content

白話的解釋,如果你不知道該怎麼定義的話:可以先都使用 article 去定義一段文本。如果它是一段「相關文本」,可以使用 section。因為 article 的語意比較多樣,而 section 則窄的多。

而如果這段內容它「沒有任何語意上」的意義,再使用 div。

誤區 3 : 哪一種元素要加 heading?不加可以嗎?

well,礙於 web design 元素排列的關係,其實不是每次你想加 heading 都可以加上去,有時候一加上去排版就爆炸了,還得另外寫 css 隱藏。即便這樣,但是有一些元素是強烈建議一定要加 header 或 hx 的(強烈到 **must** )。比如:

  • article
  • section

至於

  • nav
  • aside

沒有 heading 倒沒有什麼太大的關係。

使用語意標記撰寫 HTML 有什麼好處?

在傳統的 HTML4 上,能夠拿來強調語意的只有 strong em hx p 等等…

但在設計上這是遠不夠用的。比如說實作一個 CMS 好了。這是我們常見的 HTML 設計手法。

<div>
  <h1> SITENAME </h1>
</div>
<div>
  <div>
    <h2> POST TITLE </h2
  </div>

  <div>
    SOCIAL LINKS HERE
  </div>

  <div>
    # EDITOR's content here
    <h1> First class heading </h1>
    <p> content here </p>
    <h2> Second class heading </h2>
    <p> content here </p>
  </div>

</div>

<div>
  <div>
    <h2> Widget Title </h2>
    <div>
      WIDGET CONTENT HERE
    </div>
</div>

你會注意到的是:

  • 真正重要的 h1 被網站名稱搶走了。即便網站名稱在這份文件裡面 一點都不重要
  • 雖然使用 h2 標記了文章的標題(本分文件最重要的標題)。但編輯或使用者自己撰寫的內容有可能也包含了 h1,h2,h3 等。搜尋引擎不知道哪一個 heading 才是最重要的。
  • sidebar 也有 h2,這樣一來也更混亂了。
  • social link 在正文的前面,有一定的機率被認為是文章正文。

很困擾不是嗎?

但如果你使用了 article / section / header / aside … 等等標籤,搜尋引擎或其他語意判斷引擎就能明瞭你強調的重點了。

對 SEO 將有極大的幫助。

現在就能進場使用 HTML5 語意標記了嗎?

一般來說,我不會建議一般人現在就使用 HTML5 語意標記撰寫你的 HTML。雖然已經有搜尋引擎 support 了 ( Yahoo )。

使用這些標記固然搜索上有加分,但是你一旦寫錯了,代價可是很大…

之前我一個好友設計師 Eli 在幫我設計 HTML template 時,我一時大意沒有 review,就讓這東西上 production 了。後來在 Yahoo 的搜尋效果很糟糕,甚至我還看到令人 XD 的搜尋結果:

不知道為何「內文」很少被 index 到,而標題竟然都被記載 “XXXX 主選單:YYYY “。

剛開始本來以為 Yahoo 在發春,後來想通後才明白 Yahoo 非常照著 spec 在走,因此 HTML 內如果 一堆亂標的 section / nav header 之類的反而會誤導搜尋引擎,產生非我們期望的結果。

加上原本這一份 html 是內部規範,底下的 RD 照著走,就越來越慘不忍睹了。我足足花了兩週才把整份 html 重寫到接近正確的樣子。(因為 style 還不能跑掉)

需要注意的事項

  • 瀏覽器的支援:

    • IE 不支援 HTML5。必須使用 html5shiv 去 enable html5 。
    • 不管你想要支援何種瀏覽器,請都先使用 html5doctorreset.css reset 樣式
  • 不要對任何語意 TAG 下 style

    • 語意 tag 只是用來描述語意的而已,如果真要下 style,請用非語意元素包裹,下在非語意元素上。
    • 硬是將 style 下在語意上,會造成之後想要調整語意順序時,有無法遇見的災難。(我就是被這件事情整到 …改到都想要哭了)
  • 不要一開始就使用 html5 語意 TAG,寫完再翻修

    • 如果你想新編一份 html5,在撰寫文件時,我個人的建議是,請先用 html4 寫一份標準的 dom。之後再照語意用 html5 tag 去調整。
    • 因為會發生的情形是 (1) 有時候你不是那麼熟悉語意 tag,你不知道用哪一個標記比較適當。甚至更可能的是,你被 html5 的 spec 弄糊塗了,你以為適用的情境完全是錯的。(這就是這次慘劇發生的主要原因)(2) 邊寫邊改會拖垮你的工作效率。(3) 過於對單一頁面執著語意,在寫另外一份頁面時會發現完全不適用。
  • 可以使用 Chrome 的 html5outliner 去檢視成果。

不知道如何判斷適用的語意 TAG 怎麼辦?

HTML5doctor 提供了一份流程圖 供你參考。

成果

螢幕快照 2011-08-29 下午7.18.18

參考資料

 
廣告

6個html5的線上開發工具

6 个强大的 HTML5 应用在线开发工具

 

轉自5迷3道

 

HTML5日渐成为Web开发的主流技术之一,目前,W3C已经完成了HTML5的基本特性,HTML5成为W3C官方标准指日可待。

目前互联网中已经出现了大量基于HTML5的应用,其展示的效果一点也不输Flash,甚至要更为强大。该技术最大的优势是跨平台,甚至未来有可能成为开发移动应用的主要技术。

本文为你带来6个强大的HTML5应用开发工具,希望可以提高你的开发效率。

1.  Adobe Edge Animate

Adobe Edge Animate是一款Adobe开发的全新的工具,致力于寻求适用于HTML5、CSS3和JavaScript的交互、动画编程体验。

该工具有一个类似Flash Pro的用户界面,允许开发者对交互内容、动画进行精准的控制。目前尚不支持HTML5 canvas和audio标签,Adobe表示会在未来增加支持。

价格:单独版 – $10/月,Creative Cloud套件 – $50/月

2.  HTML KickStart

这是一套集合了各种CSS、HTML5和jQuery模块的工具,不仅可以帮助你节省开发时间,还可以帮助你获取HTML5开发的灵感。

该工具包中包含了大量预配置、预格式化的功能块,你可以非常快地实现一些特定的功能,如幻灯、按钮、选项卡等。

价格:免费

3.  HTML5 Reset

HTML5 Reset包含了一组HTML、CSS相关的文件,帮助你在开始新项目的时候节省时间,并提供了基于HTML5的空白WordPress模板。

价格:免费

4.  Liveweave

这是一个HTML5、JavaScript和CSS3代码在线测试工具,你可以直观地看到你的代码的运行情况。此外,该工具还具备代码自动完成功能,你也可以将其作为一个在线IDE来使用。

价格:免费

5.  Modernizr

Modernizr是一个开源的JS库,它使得基于访客浏览器的不同而开发不同级别体验的设计工作变得简单。当你在网页中嵌入Modernizr脚本时,它会检测用户当前浏览器是否支持CSS3和HTML5的特性,然后你可以决定是否创建一个基于JS的fallback,或者对那些不支持的浏览器进行简单的优雅降级。

价格:免费

6.  Video.js

Video.js是一个基于JavaScript的HTML5视频播放器,可以帮你更加简单的构建HTML5视频。Video.js提供了一个通用控件,内置的HTML/CSS皮肤,修复了跨浏览器的兼容性问题,还扩展了许多附加功能,例如全屏、字幕等。如果用户浏览器不支持HTML5视频,还可以退回到Flash或其他播放技术。

价格:免费

英文原文:sitepoint

转载自:iteye

Using SVG

出處css-tricks

Using SVG

PUBLISHED MARCH 5, 2013 BY CHRIS COYIER

FreshBooks Cloud Accounting - Sign Up Today For Your Free Trial!

SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know.

 

Why use SVG at all?

  • Small file sizes that compress well
  • Scales to any size without losing clarity (except very tiny)
  • Looks great on retina displays
  • Design control like interactivity and filters

Getting some SVG to work with

Design something in Adobe Illustrator. Here’s a Kiwi bird standing on an oval.

Notice the artboard is cropped up right agains the edges of the design. Canvas matters in SVG just like it would in PNG or JPG.

You can save the file directly from Adobe Illustrator as an SVG file.

As you save it, you’ll get another dialog for SVG Options. I honestly don’t know much about all this. There is a whole spec for SVG Profiles. I find SVG 1.1 works fine.

The interesting part here is that you can either press OK and save the file, or press “SVG Code…" and it will open TextEdit (on a Mac anyway) with the SVG code in it.

Both can be useful.

Using SVG as an <img>

If I save the SVG to a file, I can use it directly in an <img> tag.

<img src="kiwi.svg" alt="Kiwi standing on oval">

In Illustrator, our artboard was 612px ✕ 502px.

That’s exactly how big the image will on the page, left to itself. You can change the size of it though just by selecting the img and changing its width or height, again like you could a PNG or JPG. Here’s an example of that:

Browser support

Using it this way has its own set of specific browser support. Essentially: it works everywhere except IE 8 and down and Android 2.3 and down.

If you’d like to use SVG, but also neeed to support these browsers that don’t support using SVG in this way, you have options. I’ve covered different techniques in differentworkshops I’ve done.

One way is to test for support with Modernizr and swap out the src of the image:

if (!Modernizr.svg) {
  $(".logo img").attr("src", "images/logo.png");
}

David Bushell has a really simple alternative, if you’re OK with JavaScript in the markup:

<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">

SVGeezy can also help. We’ll cover more fallback techniques as this article progresses.

Using SVG as a background-image

Similarly easy to using SVG as an img, you can use it in CSS as a background-image.

<a href="/" class="logo">
  Kiwi Corp
</a>
.logo {
  display: block;
  text-indent: -9999px;
  width: 100px;
  height: 82px;
  background: url(kiwi.svg);
  background-size: 100px 82px;
}

Notice we set the background-size to the size of the logo element. We have to do that otherwise we’ll just see a bit of the upper left of our much larger original SVG image. These numbers are aspect-ratio aware of the original size. But you could use abackground-size keywords like contain if you want to make sure the image will fit and can’t know the parent image will be of the exact right size.

Browser support

Using SVG as background-image has its own special set of browser support, but it’s essentially the same as using SVG as img. The only problem browsers are IE 8 and down and Android 2.3 and down.

Modernizr can help us here, and in a more efficient way than using img. If we replace thebackground-image with a supported format, only one HTTP request will be made instead of two. Modernizr adds a class name of “no-svg" to the html element if it doesn’t support SVG, so we use that:

.main-header {
  background: url(logo.svg) no-repeat top left;
  background-size: contain;
}

.no-svg .main-header {
  background-image: url(logo.png);
}

Another clever progressive enhancement flavored technique for using SVG as background-image is by using it in conjunction with multiple backgrounds. SVG and multiple backgrounds have very similar browser support, so if the brower supports multiple backgrounds, it supports SVG, and the delcaration will work (and override any previous declaration).

body {
  background: url(fallback.png);
  background-image: url(image.svg), none;
}

The problem with both <img> and background-image…

Is that you don’t get to control the innards of the SVG with CSS like you can with the following two ways. Read on!

Using “inline" SVG

Remember how you can grab the SVG code right from Illustrator while saving if you want? (You can also just open the SVG file in a text editor and grab that code.) You can drop that code right into an HTML document and the SVG image will show up just the same as if you put it in an img.

<body>

   <!-- paste in SVG code, image shows up!  -->

</body>

This can be nice because the image comes over right in the document and doesn’t need to make an additional HTTP request. In other words, it has the same advantages as using a Data URI. It has the same disadvantages too. A potentially “bloated" document, a big chunk of crap right in the document you’re trying to author, and inability to cache.

If you’re using a back end language that can go fetch the file and insert it, at least you can clean up the authoring experience. Like:

<?php include("kiwi.svg"); ?>

Optimize it first

Likely not a huge shocker, but the SVG that Adobe Illustrator gives you isn’t particularly optimized. It has a DOCTYPE and generator notes and all that junk. SVG is already pretty small, but why not do all we can? Peter Collingridge has an online SVG Optimiser tool. Upload the old, download the new. In Kyle Foster’s video, he even takes it the extra mile and removes line breaks after this optimization.

If you’re even more hardcore, here is a Node JS tool for doing it yourself.

Now you can control with CSS!

See how the SVG looks a lot like HTML? That’s because they are both essentially XML (named tags with angle brackets with stuff inside). In our design, we have two elements that make up the design, an <ellipse> and an <path>. We can jump into the code and give them class names, just like any other HTML element can have.

<svg ...>
  <ellipse class="ground" .../>
  <path class="kiwi" .../>
</svg>

Now in any CSS on this page we can control those individual elements with special SVG CSS. This doesn’t have to be CSS embedded in the SVG itself, it can be anywhere, even in our global stylesheet <link>ed up. Note that SVG elements have a special set of CSS properties that work on them. For instance, it’s not background-color, it’s fill. You can use normal stuff like :hover though.

.kiwi {
  fill: #94d31b; 
}
.kiwi:hover {
  fill: #ace63c; 
}

Even cooler, SVG has all these fancy filters. For instance blurring. Chuck a filter in your<svg>:

<svg ...>
  ...
  <filter id="pictureFilter" >
    <feGaussianBlur stdDeviation="5" />
  </filter> 
</svg>

Then you can apply that in your CSS as needed:

.ground:hover {
  filter: url(#pictureFilter);
}

Here’s an example of all that:

Browser support

Inline SVG has it’s own set of browser support, but again, it’s essentially only an issue in IE 8 and down and Android 2.3 and down1.

One way to handle fallbacks for this type of SVG is:

<svg> ... </svg>
<div class="fallback"></div>

Then use Modernizr again:

.logo-fallback { 
  display: none;
  /* Make sure it's the same size as the SVG takes up */
}
.no-svg .logo-fallback { 
  background-image: url(logo.png); 
}

Using SVG as an

For the fallback, Modernizr detection will work fine here:

.no-svg .logo {
  width: 200px;
  height: 164px;
  background-image: url(kiwi.png);
}

This will work great with caching and actually has deeper support than using it any other way. But, if you want the CSS stuff to work, you can’t use an external stylesheet or<style> on the document, you need to use a <style> element inside the SVG file itself.

<svg ...>
  <style>
    /* SVG specific fancy CSS styling here */
  </style>
  ...
</svg>

External stylesheets for

And yep, if you have an embedded <style> in your SVG before you base64 it, it will work if you use it as an <object> still!

Command line thingy for base64ing SVG:

 

Or alternatively Mathias Bynens has some techniques:

Use openssl base64 < path/to/file.png | tr -d '\n' | pbcopy or cat path/to/file.png | openssl base64 | tr -d '\n' | pbcopy to skip writing to a file and just copy the base64-encoded output to the clipboard without the line breaks.

Automation Tools

  • grunticon:

    From a CSS perspective, it’s easy to use, as it generates a class referencing each icon, and doesn’t use CSS sprites.

    grunticon takes a folder of SVG/PNG files (typically, icons that you’ve drawn in an application like Adobe Illustrator), and outputs them to CSS in 3 formats: svg data urls, png data urls, and a third fallback CSS file with references to regular png images, which are also automatically generated and placed in a folder.

  • iconizr:

    A PHP command line tool for converting SVG images to a set of CSS icons (SVG & PNG, single icons and / or CSS sprites) with support for image optimization and Sass output.

Related Stuff

Kyle Foster’s An Optimized SVG Workflow, which is worth an embed:

走向视网膜(Retina)的Web时代

出處w3plus

走向视网膜(Retina)的Web时代

 
 
作者:大漠 日期:2012-12-14 点击:1481

维基百科将Retina译为“视网膜”。"Retina"一词,原意是“视网膜”的意思,指显示屏的分辨率极高,使得肉眼无法分辨单个像素。

苹果的“iPhone4”和"new iPad"以及“Macbook Pro”中已经使用了Retina(视网膜)技术。这是一种新的屏幕的显示技术。苹果表示,Retina屏幕是一种具备超高像素密度的液晶屏,它可以将960×640的分辨率压缩到一个3.5英寸的显示屏内。也就是说,该屏幕的像素密度达到326像素/英寸(ppi)。

苹果采用Retina屏幕技术得到了更多人的亲眯,因为Retina给画面带来了前所未有的清晰平滑效果。相比之下,互联网非常的庞大,从当初的普通屏幕过渡到Retina是件缓慢而又痛苦的事情。在缺少行业标准来简化这个过程,每个Web开发人员和设计者为了确保他们的用户得到最好的视觉体验,Retina还是给他们带来了些小麻烦。

为了解决这些麻烦,更好的从事Web开发和设计,做为一名紧跟时代前沿技术的Web前端人员是很有必要了解学习Retina。

在深入了解和学习Retina之前,我们需要了先学习一些基本概念,这些基本概念将更好的带领我们深入下去。

设备像素

Retina web

设备像素也被称为物理像素,他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。

屏幕密度

屏幕密度是指一个设备表面上存在的像素数量,它通常以每英寸有多少像素来计算(PPI)。苹果将这个营销出一个专业的术语“Retina”,将其称为双密度显示,声称人类的肉眼将无法区分单个像素。当一个显示屏像素密度超过300ppi时,人眼就无法区分出单独的像素。这也是讲:显示设备清晰度已达到人视网膜可分辨像素的极限。因此行动电话显示器的像素密度达到或高于300ppi就不会再出现颗粒感,而手持平板类电器显示器的像素密度达到或高于260ppi就不会再出现颗粒感,苹果行动电脑的Retina显示器像素密度只要超过200ppi就无法区分出单独的像素。

CSS像素

Retina web

CSS像素是一个抽象的单位,主要使用在浏览器上,用来精确的度量(确定)Web页面上的内容。一般情况下,CSS像素被称为与设备无关的像素(device-independent像素),简称为“DIPs”。在一个标准的显示密度下,一个CSS像素对应着一个设备像素。

<div height="200" width="300"></div>

上面的代码,将会在显示屏设备上绘制一个200×300像素的盒子。但是在Retina屏幕下,相同的div却使用了400×600设备像素,保持相同的物理尺寸显示,导致每个像素点实际上有4倍的普通像素点,如图所示:

Retina web

反过来说,一个CSS像素点实际分成了四个,这样就造成了颜色只能近似选取,于是,我们看上去就变得模糊了。那么在Web开发和设计中,我们可以通过"device-pixel-ratio"来解决。

device-pixel-ratio,
-o-device-pixel-ratio,
-moz-device-pixel-ratio,
-Webkit-device-pixel-ratio {
  …
}

或者你可以使用将来的写法:

device-pixel-ratio,
-o-min-device-pixel-ratio,
min--moz-device-pixel-ratio,
-Webkit-min-device-pixel-ratio {
  …
}

在javascript中,“window.devicePixelRatio”可以用来获得相同的比率,虽然目前浏览器支持还有限。但这种技术将会慢慢被支持。

“window.devicePixelRatio"其实指的就是“devicePixelRatio”,我们来看看“window.devicePixelRatio”是什么?简单点说“window.devicePixelRatio”是设备上物理像素和设备像素(device-independent pixels (dips))的比例。他有一个计算公式:window.devicePixelRatio = 物理像素/dips。

dip或dp,(device independent pixels,设备独立像素)与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。

所有非视网膜屏幕的iPhone在垂直屏幕显示的时候,他的宽度为320物理像素,当你通过“meta”改变“viewport”时:

<meta name="viewport" content="width=device-width">

这个时候,视窗布局宽度变成320px(不同于视觉区域宽度,不放大显示情况下,两者大小一致),这样视觉上,整个页面很自然的覆盖在屏幕上,如下图所示:

Retina web

这样,非视网膜屏幕的iphone上,屏幕物理像素320像素,独立像素也是320像素,因此window.devicePixelRatio等于1.

而对于视网膜屏幕的iphone,如iphone4s, 纵向显示的时候,屏幕物理像素640像素。同样,当用户设置

<meta name="viewport" content="width=device-width">

这个时候,其视区宽度并不是640像素,而是320像素,这是为了有更好的阅读体验 – 更合适的文字大小。

这样,在视网膜屏幕的iphone上,屏幕物理像素640像素,独立像素还是320像素,因此,window.devicePixelRatio等于2.

位图像素

Retina web

位图是由像素(Pixel)组成的,像素是位图最小的信息单元,存储在图像栅格中(PNG, JPG, GIF等等)。每个像素都具有特定的位置和颜色值。按从左到右、从上到下的顺序来记录图像中每一个像素的信息,如:像素在屏幕上的位置、像素的颜色等。位图图像质量是由单位长度内像素的多少来决定的。单位长度内像素越多,分辨率越高,图像的效果越好。

位图也称为“位图图像”“点阵图像”“数据图像”“数码图像”。

基于图像的栅格分辨率,图像在Web中是由CSS像素定义了一个抽象的大小。浏览器挤压或者拉伸图像都是基于其CSS高度或者宽度来进行呈现的一个过程。

当一个光栅图像在标准设备下全屏显示时,一位图像素对应的就是一设备像素,导致一个完全保真的显示。因为一个位置像素不能进一步分裂,当在Retina屏幕下时,他要放大四倍来保持相同的物理像素的大小,这样就会丢失很多细节,造成失真的情形。换句话说,每一位图像素被乘以四填补相同的物理表面在视网膜屏幕下显示。

Retina web

高分辨率屏幕与高像素密度屏幕

在 Retina 视网膜屏幕面世之前人们很少关注像素密度,尤其在 Windows 系统下,提高屏幕分辨率一般都是通过提高屏幕尺寸。而随着屏幕分辨率的提升,图像和文字显示目标会相应缩小,造成观看极其不便。因为系统并不会自动根据屏幕尺寸和分辨率关系相应的调整文字和图标的大小。(即使手动调整也会因为微软一直采用的点阵字体和大多数位图在提高分辨率后,因为多于出的像素点没有填充渲染会出现拉伸,进而会产生锯齿,这也是系统不会自动适配的原因之一)这也就给我们造成一种假象:显示器尺寸越大,分辨率就会越大。

所以当最近苹果的 Retina 视网膜屏幕令很多人困惑不已,为什么那么小的屏幕会有那么大的分辨率。为什么那么大的分辨率,非但没有使得文字和图像变小,反而更加清晰了呢?

高像素密度屏幕(高 ppi)

严格来说,高像素密度屏幕也是属于高分辨率屏幕,不同的是高像素密度屏幕在提升了分辨率的同时也提高了其像素密度,即相同的尺寸有着更大的分辨率。以评估的 Retina 视网膜屏幕为例,它并不是像普通显示器那样通过增大尺寸来增加分辨率,而是靠提升单位面积屏幕的像素数量,即像素密度来提升分辨率,这样就有了高像素密度屏幕。

同时操作系统也会自动采取相应的模式(如 Mac 下的 HiDPI)进行适配,将缩小后的字体(苹果一直采用矢量字体)和图标重新放大,这样苹果用了更多的像素数来显示同样的内容,显示尺寸仍然不变,但是多了更多细节,因此会有非常明显的视觉效果提升。

这样一来我们可以看一个简单的换算

iPhone/iPod Touch

普通屏幕分辨率 ====>  320px X 480px
Retion分辨率   ====>  640px X 960px

iPad,iPad2/New iPad

普通屏幕分辨率 ====>  768px X 1024px
Retion分辨率   ====>  1536px X 2048px

换算关系

普通屏幕分辨率 ====>  1点=1像素
Retion分辨率   ====>  1点=2像素

上面两段文字内容摘自于南宮瑞揚的《retina视网膜时代的页面》一文。

Retina设备

Retina是由苹果提出来的,根据苹果发布产品的定义:PPI高于210(笔记本电脑)、260(平板电脑)、300(手机)的屏幕都称为Retina屏幕

Retina web

通过上面的内容介绍,我们大致了解了Retina周边相关的术语,以及他们之间的关系和区别,如果你需要深入的了解Retina,我们就继续往下阅读。

尽管我们仍处理普通屏幕向Retina屏幕的转变中,但如何使用Retina来优化Web图形的方法还是如雨后春笋涌现,而且还有更多的人在关注和分享。

THML和CSS的标准

最直截了当的方法就是通过手动制图或以编程的方式制作两种不同的图形,一张是普通屏幕的图片,另外一种是Retina屏幕的图形,而且Retina屏幕下的图片是普通屏幕的两倍像素。看个实例,有一张200×300像素的图片(CSS像素),然后将一个位图的像素400×600上传到你的服务器上,通过CSS样式或HTML属性将其压缩50%,这个时候,在一个标签分辨率的显示器上,其呈现的图像是位图的四分之一像素。简单点理解,普通屏幕下的图像被压缩,减少像素取样(只是位图含像素的四分之一),这样就造成了资源浪费。同时把这个过程称为"Downsampled"。

Retina web

但在Retina屏幕下,相同的图像会使用四倍的物理像素显示,这样一来,每个物理像素最终完全匹配一位图像素,使用图像得到完全的呈现。

Retina web

有几种方法可以实现这样的效果。

1、使用HTML

最简单的方法就是通过“img”标签,设置“width”和“height”属性:

<img src="example@2x.png" width="200" height="300" />

这里注意了,即使指定的图片高度是可选的,但是在加载图片前,浏览器已经预留了所需的空间。这样就可以防址页面布局更改图片时,在加载一次。

2、使用JavaScript

同样的效果,我们可以通过JavaScript脚本对图像(为Retina屏幕准备的图像)进行减半。

$(window).load(function() {
  var images = $('img');
  images.each(function(i) {
    $(this).width($(this).width() / 2);
  });
});

3、使用CSS

另外一种方法就是通过CSS来实现。那么常见的方法就是给元素设置一个背景图像,比如说给“div”元素设置一个背景图像,最关键的是给这个背景图像设置"background-size",来指定背景图像的大小,你也可以给元素设置一个大小,然后给"background-size"设置一个“contain”属性值。不过可惜的是IE78不支持这个属性的运用。

.image {
  background-image: url(example@2x.png);
  background-size: 200px 300px;
  /*或者设置background-size: contain; */
  height: 300px;
  width: 200px;
}

你还可以使用元素的伪元素来代替

.image-container:before {
  background-image: url(example@2x.png);
  background-size: 200px 300px;
  content:'';
  display: block;
  height: 300px;
  width: 200px;
}

上面通过三种方法来实现,那么来看看他们的对比:

HTML和CSS方法的优点

  1. 很容易实现
  2. 能跨浏览器兼容

HTML和CSS方法的缺点

  1. 非Retina屏幕下必须下载更大的图片资源
  2. Downsampled图像在不同的分辨下可能会失去一定的清晰度
  3. background-size在IE9以下浏览器不能得到友好支持

来看一个张旭鑫大师的经验之谈《视网膜New iPad与普通分辨率iPad页面的兼容处理》。

有一张200×200像素的图片(CSS像素,也就是普通像素点或者说是标准像素点),我们给图片设置一个CSS样式:

img {
  width:200px;
  height:200px;
}

在iPad2或Mini iPad中就是很正常显示的图片;但是,在New iPad中,1个CSS像素点实际上有4个位图像素点,1个分成4个,显然不够分啊,只能颜色近似选取,于是,图片感觉就是模糊的。

因此,要想让视网膜屏幕下的图片高清晰显示,我们需要的图片的原始大小不能是200×200像素,而需要2倍高宽,即400×400像素,CSS像素限制依然是:

img {
  width:200px;
  height:200px;
}

此时,视网膜屏幕下图片就显示OK了(非视网膜屏幕图片被压缩-减少像素取样——资源浪费!)。

查询像素密度

为Retina屏幕下查询Web图像的像素密度,然后调用对应的图像。目前较为流行的方式是通过CSS或者JavaScript来实现。

1 、使用CSS Media Queries

可以通过“device-pixel-ratio”属性或者其扩展属性“min-device-pixel-ratio”和“max-device-pixel-ratio”。这几个Media Queries可以使用background-image为Retina准备高精密度像素的图片。

.icon {
  background-image: url(example.png);
  background-size: 200px 300px;
  height: 300px;
  width: 200px;
}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .icon {
    background-image: url(example@2x.png);
  }
}

通过“window.devicePixelRatio”的比例“1.5”或"2″为不同的苹果设备做相对应的查询。

iPhone4

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
	/* Styles */
}

Retian屏幕和普通屏幕

@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

  /* Small screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 700px) {

  /* Medium screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

  /* Medium screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 1300px) {

  /* Large screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Large screen, retina, stuff to override above media query */

}

当实没怎么搞懂上面的代码,今天可算是有明白了。更多的media queries可以点击CSS3 Media Queries模板

CSS Media Queries的优点

  1. 只有对应的目标元素才会下载图片资源
  2. 跨浏览器兼容
  3. 像素可以精确控制

CSS Media Queries的缺点

  1. 单调无味的实现过程,特别是大型项目中
  2. 只能通过HTML元素的背景图片来实现,无任何语义化可言

2、使用JavaScript

使用js对“window.devicePixelRatio”进行判断,然后根据对应的值给Retina屏幕选择图像。

$(document).ready(function(){
  if (window.devicePixelRatio > 1) {
    var lowresImages = $('img');

    images.each(function(i) {
      var lowres = $(this).attr('src');
      var highres = lowres.replace(".", "@2x.");
      $(this).attr('src', highres);
    });
  }
});

其中Retina.js是为Retina而生的,基本上实现了上面的所有功能。

前面也说过了,devicePixelRatio目前支持的浏览器并不多,但将来会有更多的浏览器支持这一技术。

Javascript查询的优点

  1. 易于实施
  2. 非Retina屏幕不用下载过大的资源
  3. 像素精确控制

Javascript查询的缺点

  1. Retina屏幕下必须下载标准备和高精密度的两个资源
  2. Retina屏幕下图像交互可见
  3. 浏览器兼容性不强

可缩放矢量图形

不管使用什么方法,光栅衅像仍然有自己固定的位图分辨率,也就是其缩放始终受限于其像素,也绝对无法无限制的伸缩。但是矢量图就不一样,他可以随意的进行伸缩,而无任何影响。这就是在Retina屏幕下的Web图形,矢量图形具有无法可比的优势。

到目前为止,基于XML的svg格式制作的矢量图得到了70&以上的浏览器支持,可以使用svg绘制各种图形,并且可以在Retina下任意的伸缩。

做为web设计人员,使用SVG最简单的方法是通过HTML的img标签、CSS的background属性或者伪元素的content中的url()。

HTML的img标签调用svg

<img src="example.svg" width="200" height="300" />

在这里一个svg图像可以做为普通显屏和Retina显屏的通用图像,可以做任何的伸缩,而不会像光栅位图一样失真,而且资源统一,节省带宽,方便维护。

CSS中调用svg图像

svg图像可以像普通图像一样,当作元素的背景图片来应用

.image {
  background-image: url(example.svg);
  background-size: 200px 300px;
  height: 200px;
  width: 300px;
}

除了当成元素的背景图片使用之外,还可以通过伪元素的“content”来调用

.image-container:before {
  content: url(example.svg);
}

如果你想在IE7-8和Android2.x上运用,那么使用使用png图片来代替svg图像

.image {
  background-image: url(example.png);
  background-size: 200px 300px;
}

.svg {
  .image {
    background-image: url(example.svg);
  }
}

在HTML标签中,给img标签自定义一个属性,给这个自定义属性设置一个png图片,以做备用,不过这种方法需要一定的脚本配合使用。

<img src="example.svg" data-png-fallback="example.png" />

需要的脚本

$(document).ready(function(){
  if(!Modernizr.svg) {
    var images = $('img[data-png-fallback]');
    images.each(function(i) {
      $(this).attr('src', $(this).data('png-fallback'));
    });
  }
});

SVG矢量图的优点

  1. 一个资源适合所有设备
  2. 易于维护
  3. 面向未来的:可伸缩向量图形

SVG矢量图的缺点

  1. 没有像素那样有精度
  2. 由于文件大小,不适合复杂的图形
  3. 不支持IE7-8和早期的安卓版本

零零散散的了解了Retina是个什么东东?那么有些同学肯会问,做为前端人员,如何做,网站才能适应Retina时代的产品呢?

mir.aculo.us的信息图会告诉你如何让网站适应Retina分辨率

Retina web

此图由南宮瑞揚根据mir.aculo.us的信息图所译。有关于更详细的介绍请点击这里

总结

Retina对于我来说也是一个新课题,边看边做笔记,但还是没有完全理解清楚。还需努力。花了几个晚上根据的《Towards A Retina Web》、张旭鑫的《视网膜New iPad与普通分辨率iPad页面的兼容处理》以及南宮瑞揚的《retina视网膜时代的页面》做了这篇笔记。希望对初次接触的朋友有所帮助。如果有说错的地方,还请同行朋友指正。谢谢。

7個不能遺忘的CSS樣式

出處w3plus

7个不能遗忘的CSS样式

作者:大漠 日期:2011-10-14 点击:2706

今天要给大家介绍七个CSS样式片段,我认为这几个片段对我们项目的制作帮助还是蛮大的,如果你认真看完这篇教程后,我想你会喜欢这几个CSS样式,而且我相信你会马上运用到你即将要制作的下一个项目中,或者说会马上运用到你现在制作的项目中。在具体介绍之前先要告诉大家,这个几CSS样式片段是David WalshPaul IrishHTML5 Boilerplate项目中挖掘出来的。如果大家看到要是对HTML5 Boilerplate感兴趣的话,你可以直接从GitHub下载HTML5 Boilerplate整个项目,阅读其源代码。因为Paul IrishHTML5 Boilerplate提供了一套非常有用的CSS、JavaScript、图像和HTML文件,可以帮助您很好的了解HTML5的Web应用程序。

下面我主要在这篇教程中给大定呈现的是David Walsh整理出来的七个很有价值的CSS样式片段,至少我认为是很有价值,当然我也希望您看后也会说很有价值。啰嗦话不多说了,直奔主题吧。

一、HTML标签

html标签起什么作用,我就不多说了,大家在清楚不过了。不过我要说的是,很多开发人员都不怎么设置html标签的样式,但html标签其实又是一个重点之一,所以我建议在你的项目中考虑在html标签中设置下面的样式:

		html {
			font-size: 100%; /*==用来防止IE和Opera浏览器下的Bug==*/
			overflow-x: hidden;/*==隐藏水平滚动条==*/
			overflow-y:scroll;/*==保证所有浏览器下都显示垂直滚动条,防止没有滚动条的页面有移动效果==*/
			-webkit-tap-highlight-color: transparent;/*==Add vertical scrollbar  Keeps page centered in all browsers regardless of content height==*/
			/*==Define maximum text display as 100% to document Corrects text displayed oddly after orientation change in handheld browsers ==*/
			-webkit-text-size-adjust: 100%;
			-ms-text-size-adjust: 100%;
			height: 100%;/*==在IE下body的百分高度需要在html设置此值==*/
		}
	

这个CSS片段具体解释大家可以参考注释部分,其亮点之处是用来控制浏览器的滚动条,特别是垂直方向的滚动条,在我们平时的Web页面制作中时常碰到当一个页面不够一屏显示时会出显页面移效果,欲解决这个问题,看上面的代码。另外一个就是Webkit内核浏览器中Google Chrome不支持12px以下的字体,此处我们一起解决。或许这个技巧大家已经运用到项目中来了:)。

二、::selection

::selection他是CSS3的一个产物,我在《CSS ::Selection》专门介绍过::selection的使用方法(David Walsh也有着重介绍CSS Selection Styling),但这次我还是需要重点在指出一回:

		::-moz-selection {
			background: #fe57a1;
			color: #fff;
			text-shadow: none;
		}
		::selection{
			background: #fe57a1;
			color: #fff;
			text-shadow: none;
		}
	

这个技巧很有特色,它可以帮你改变你选择中元素的文本的高亮背景和前景色,让你的网站具有一个独一无二高亮色,上面代码中的颜色值可以设置成你自己喜欢的色值。不过这种方法只适合现代浏览器,在IE6-8下是没有效果的,具体原因不用我在说了。

三、img -ms-interpolation-mode: bicubic;

图片的缩放在IE7以及IE6下是件很恐怖的事情,将严重影响您的图片质量,欲解决,记得在img标签上加上下面的代码:

		img {
			-ms-interpolation-mode: bicubic;
		}
	

这是一种很神奇的技巧,我早在《浏览器兼容之旅的第四站:IE常见Bug——part2》一文中有提到过,并且将其列为IE的bug。而且CSS Tricks的《IE Fix: Bicubic Scaling for Images》和Devthought中《Tip: High quality CSS thumbnails in IE7》都有进行过详细介绍。

四、显示隐藏元素

在Web中时常用到图片代替文字,特别在logo用图片来代替。换句话说就是:视觉隐藏的文字,同时还允许屏幕阅读器读取它,是非常重要的。问题是,我已经看到了很多种不同的方法实现方法,这样做的,很难知道哪一种方式比另一种更好。 HTML5的样板的建议是:

		/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
	.visuallyhidden { 
		border: 0; 
		clip: rect(0 0 0 0); 
		height: 1px; 
		margin: -1px; 
		overflow: hidden; 
		padding: 0; 
		position: absolute; 
		width: 1px; 
	}

	/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
	.visuallyhidden.focusable:active, 
	.visuallyhidden.focusable:focus { 
		clip: auto; 
		height: auto; 
		margin: 0; 
		overflow: visible; 
		position: static; 
		width: auto; 
	}
	

这种解决方法最早是由Jonathan Snook提出来的,如果大家感兴趣的话可以阅读Jonathan Snook的《Hiding Content for Accessibility》一文,我想你会受益非浅。

五、svg:not(:root)

IE9有一个最大的亮点,就是支持SVG。当然使用时大家要注意一个是:

		svg:not(:root){overflow:hidden;}
	

六、@media print img max-width

即使你不希望使用任何screen的媒体特性,但是Paul IrishHTML5 Boilerplate的打印样式还是值得大家学习和借鉴的,我想大家和我一样,当在设置打印样式时常不会考虑图片的样式,最起码我自己是没有考虑到的:

		@media print {
			img { max-width: 100% !important; }
		}
	

上面代码确保你的图片不会溢出你的容器设置。

七、@media print widows

在屏幕和纸上window内容是好难看的,神奇的是只需要在段落和标题标签上这样设置就解决了

		@media print {
			p, h2, h3 { orphans: 3; widows: 3; }
		}
	

这两种小技巧是有关于“媒体特性”上的应用,有关于更多的媒体应用大家可以阅读本站前面的教程《CSS3 Media Queries》。

正如你可以看到,Paul IrishHTML5 Boilerplate是一个CSS的好东西,你可以随时放入任何新的或现有的项目中。即使你不想使用Paul IrishHTML5 Boilerplate内包含的任何文件,但里面仍然有很多强大的CSS技巧供你使用,你可以考虑是否使用上面所说的CSS的技巧。在结束这次教程之前再次感谢Paul Irish给我们带来这么好的模板文件——HTML5 Boilerplate;同时也要非常感谢David WalshPaul IrishHTML5 Boilerplate整理出这么多个适合的CSS技巧——《Style Scavenger: 7 CSS Snippets to Borrow from HTML5 Boilerplate》。如果你和我一样喜欢这些技巧,那就早点使用到你的项目中吧,如果你有更好的CSS技巧和我们一起分享,可以随时在下面的评论中给我们留言。

CSS3的calc()使用

出處w3plus

CSS3的calc()使用

作者:大漠 日期:2012-08-06 点击:2727

calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分。因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性能实现自适应的布局,首先让我想到的是box-sizing,但跟我说还可以计算,这让我不得不想起calc()。因为早先在官网和一些blog上看到相关的介绍,但一直没有深入,也没有自己去测试过。今天花了一下午的时间彻底学习了一下calc()。于是就有了这篇blog,希望对大家有所帮助。

平时在制作页面的时候,总会碰到有的元素是100%的宽度。众所周知,如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子撑破。比如说,有一个边框,或者说有margin和padding,这些都会让你的盒子撑破。我们换句话来说,如果你的元素宽度是100%时,只要你在元素中添加了border,padding,margin任何一值,都将会把元素盒子撑破(标准模式下,除IE怪异模式)。这样一来就会相当的麻烦,平时我们碰到这样的现象时,也是相当的谨慎,有时甚至无法解决,只能通过改变结构来实现。就算你通过繁琐的方法实现了,但有于浏览器的兼容性而导致最终效果不一致。虽然前面介绍的CSS3属性中的box-sizing在一定程度上解决这样的问题,其实今天的calc()函数功能实现上面的效果来得更简单。

什么是calc()?

学习calc()之前,我们有必要先知道calc()是什么?只有知道了他是个什么东东?在实际运用中更好的使用他。

calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。

calc()能做什么?

calc()能让你给元素的做计算,你可以给一个div元素,使用百分比、em、px和rem单位值计算出其宽度或者高度,比如说“width:calc(50% + 2em)”,这样一来你就不用考虑元素DIV的宽度值到底是多少,而把这个烦人的任务交由浏览器去计算。

calc()语法

calc()语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示:

.elm {
  width: calc(expression);
}

其中"expression"是一个表达式,用来计算长度的表达式。

calc()的运算规则

calc()使用通用的数学运算规则,但是也提供更智能的功能:

  1. 使用“+”、“-”、“*” 和 “/”四则运算;
  2. 可以使用百分比、px、em、rem等单位;
  3. 可以混合使用各种单位进行计算;
  4. 表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;
  5. 表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。

浏览器的兼容性

浏览器对calc()的兼容性还算不错,在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持,同样需要在其前面加上各浏览器厂商的识别符,不过可惜的是,移动端的浏览器还没仅有“firefox for android 14.0”支持,其他的全军覆没。

大家在实际使用时,同样需要添加浏览器的前缀

 .elm {
	/*Firefox*/
	-moz-calc(expression);
	/*chrome safari*/
	-webkit-calc(expression);
	/*Standard */
	calc();
 }

通过上面的了解,大家对calc()不在那么陌生,但对于实际的运用可能还是不太了解,那么大家就接下来跟我一起动手,通过实例来了解他吧。首先我们来看一个最常用的实例:

<div class="demo">
	 <div class="box"></div>
</div>	

上面的结构很简单,就是一个div.demo的元素中包含了一个div.box的元素,接下来我们一步一步来看其中的变化。

第一步:添加普通样式:

.demo {
	width: 300px;
	background: #60f;
}
.box {
  width: 100%;
	background: #f60;
	height: 50px;
}

此时的效果很简单,就是div.box完全遮盖了div.demo,如下图所示:

calc-step1

第二步,在div.box上添加border和padding

这一步很棘手的事情来了,在div.box上添加10px的内距padding,同时添加5px的border:

.demo {
	width: 300px;
	background: #60f;
}
.box {
  width: 100%;
  background: #f60;
  height: 50px;
  padding: 10px;
  border: 5px solid green;
}

为了更好的说明问题,我在div.demo上添加了一个padding:3px 0;

.demo {
	width: 300px;
	background: #60f;
padding: 3px 0;	
}
.box {
  width: 100%;
  background: #f60;
  height: 50px;
  padding: 10px;
  border: 5px solid green;
}

这个时候大家不知道能否想到问题会发生在哪?其实很简单,这个时候div.box的宽度大于了其容器div.demo的总宽度,从而撑破容器伸出来了,如图所示:

calc-step2

第三步,calc()的运用

为了解决撑破容器的问题,以前我们只能去计算div.box的宽度,用容器宽度减去padding和border的值,但有时候,我们苦于不知道元素的总宽度,比如说是自适应的布局,只知道一个百分值,但其他的值又是px之类的值,这就是难点,死卡住了。随着CSS3的出现,其中利用box-sizing来改变元素的盒模型类型实使实现效果,但今天我们学习的calc()方法更是方便。

知道总宽度是100%,在这个基础上减去boder的宽度(5px * 2 = 10px),在减去padding的宽度(10px * 2 = 20px),即"100% – (10px + 5px) * 2 = 30px" ,最终得到的值就是div.box的width值:

.demo {
	width: 300px;
	background: #60f;
	padding: 3px 0;
}
.box {
	background: #f60;
	height: 50px;
	padding: 10px;
	border: 5px solid green;
width: 90%;/*写给不支持calc()的浏览器*/
	width:-moz-calc(100% - (10px + 5px) * 2);
	width:-webkit-calc(100% - (10px + 5px) * 2);
	width: calc(100% - (10px + 5px) * 2);
}

这样一来,通过calc()计算后,div.box不在会超出其容器div.demo的宽度,如图所示:

calc-step3

上面是一个简单的实例,接下来我们一起来看一个自适应布局的例子:

上面的demo是一个非常简单而常见的布局效果,在这个布局中,我采用了自适应布局。整个布局包含了“头部”、“主内容”、“边栏”和“脚部”,并且“主内容”居左,“边栏”靠右,具体结构请看DEMO中的html部分。

接下来,我们主要看看css部分:

1、在body中设置一个内距,并附上一些基本的样式,大家可以根据自己需要进行不同的设置,此例代码如下:

body {
    background: #E8EADD;
    color: #3C323A;
    padding: 20px; 
}

2、设置主容器“wrapper”的样式

主容器的宽度是“100% – 20px * 2”,并且水平居中:

	.wrapper {
    width: 1024px; /* Fallback for browsers that don't support the calc() function */
    width: -moz-calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    width: calc(100% - 40px);
    margin: auto; 
}

给不支持calc()的浏览器设置了一个固定宽度值“1024px”。

3、给header和footer设置样式

这个例子中的header和footer很简单,给他们添加了一个内距为20px,其他就是一些基本的样式设置,那么其对应的宽度应该是"100% – 20px * 2″:

#header {
    background: #f60;
    padding: 20px;
    width: 984px;/*Fallback for browsers that don't support the calc() function*/
    width: -moz-calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    width: calc(100% - 40px);
}
#footer {
    clear:both;
    background: #000;
    padding: 20px;
    color: #fff;
    width: 984px;/* Fallback for browsers that don't support the calc() function */
    width: -moz-calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    width: calc(100% - 40px);
}

4、给主内容设置样式

给主内容设置了一个8px的边框,20px的内距,并且向左浮动,同时设置了一个向右的外边距“20”px,关键之处,我们主内容占容器宽度的75%,这样一来,主内容的宽度应该是“75% – 8px * 2 – 20px * 2”:

#main {
    border: 8px solid #B8C172;
    float: left;
    margin-bottom: 20px;
    margin-right: 20px;
    padding: 20px;
    width: 704px; /* Fallback for browsers that don't support the calc() function */
    width: -moz-calc(75% - 20px * 2 - 8px * 2);
    width: -webkit-calc(75% - 20px * 2 - 8px * 2);
    width: calc(75% - 20px * 2 - 8px * 2); 
}

4、设置右边栏样式

给边栏设置了一个25%的宽度,其除了包含8px的边框,10px的内距外,还有主内容外距20px也要去掉,不然整个宽度与容器会相差20px,换句话说就会撑破容器掉下来。因此边栏的实际宽度应该是"25% – 10px * 2 – 8px * 2 -20px":

#accessory {
    border: 8px solid #B8C172;
    float: right;
    padding: 10px;
    width: 208px; /* Fallback for browsers that don't support the calc() function */
    width: -moz-calc(25% - 10px * 2 - 8px * 2 - 20px);
    width: -webkit-calc(25% - 10px * 2 - 8px * 2 - 20px);
    width: calc(25% - 10px * 2 - 8px * 2 - 20px);
}

这样一来,大家就看到了上面demo展现的布局效果。经过此例的学习,大家是不是会觉得使用calc()用于自适应布局是超爽的呀。此时有很多同学肯定会感吧,苦逼的IE6-8不支持,不敢使用。

最后在给大家提供一个heihgt的实例:

时隔好久没有写blog,不知道大家对calc()整明白了没有,要是没有的话,继续动手写几个例子吧。如果您有更好的分享,记得告诉我们哟。

瀏覽器開發工具的祕密

轉自w3cplus

 

浏览器开发工具的秘密

作者:大漠 日期:2013-08-30 点击:36

 

源网站:Secrets of the Browser Developer Tools
译者:涂鸦码农

 

目录

常规

 

找到开发工具

快捷方式:

  • “F12”(Windows)
  • “Cmd”⌘ +”Option” +”I”(Mac)
  • 右键选择”Inspect Element 检查元素”
  • Safari 需要在 首选项 > 高级 > 显示开发菜单,启用开发工具
  • Firebug 是 Firefox 扩展,需要在此安装
 

用最新的开发版

开发工具会不断完善,在开发版可以体验。 Chrome Canary 是 Chrome 实验版,Canary 和 Chrome 可以同时安装。 你可以通过 chrome://flags进一步加强你的 Chrome 开发工具 ,启用”1.Enable Developer Tools experiments (启用开发工具实验)“。不要忘了点击页面底部的”现在重启**”按钮。

Firefox Aurora 提供 Firefox 最新特性预览。不幸的是,Aurora 不能和 Firefox 同时打开。

Webkit Nightly 是 Safari 测试版,因此有些不稳定。Webkit Nightly 可以和 Safari 同时运行。

Opera Next 是 Opera 最新改良版,会提供一些新的功能和特性。

现在浏览器的发布周期为12周,浏览器自动更新,变化是增量的。

 

移动开发工具位置

有时候不想让我们的工具在屏幕底部,大部分的开发工具提供了配置选项。

Chrome 开发工具,左下角图标允许改变停靠设置。快速点击它,会在底部和右侧切换。长按可以选择停靠选项(独立窗口打开),你也可以点击并拖拽移动开发工具。

Firefox 和 Safari 开发工具,停靠选项在右上角临近关闭按钮的位置,可以新窗口打开。

要改变停靠位置,可点击左上角小虫子,选择 Firebug 界面位置(上/下/左/右)。Firebug 右上角可以快速选择:最小化,新窗口,关闭。

 

开发工具调试响应式设计

当调试移动站点的时候,停靠在右侧可充分利用空间,并且可以快速调整浏览器视口和开发工具的宽度,调试不同网页宽度。

在 Chrome 开发工具左下角,点击按钮可切换下侧或右侧停靠位置。

在 Chrome 开发工具右下角,点击并选择”General“标签,你可以改变工具的外观,停靠右侧时可以垂直显示面板。

 

学习快捷键

Chrome 的快捷键列在设置菜单里,点击右下”齿轮“图标,可以看到”Shortcuts“标签。

IE 的快捷键是在线的.aspx) 。

Opera 的快捷键也在设置按钮里。

Console 控制台

 

Log, Info, Debug, Warn, Error

不必用 alert 时,console.log() 是个极其有用的输出调试工具;

console.log() 是 printf 风格,因此你可以这么做:console.log("%s is %d years old.", "Bob", 42)

可以用 console.info()输出提示信息;console.debug()输出调试信息;console.warn()输出警示信息;console.error()输出错误信息。

你还可以用 %c 模式,把第二个变量作为样式格式参数。例如:console.log("%cThis is green text on a yellow background.", "color:green; background-color:yellow");

Firebug 只不过显示的图标不同,消息的背景色是一致的。

根据 MDN 的消息,他们不赞成使用 console.debug() ,因此没有图标标识,赞成用 console.log() 代替。

Chrome 和 Safari(nightly)用 info 时不显示图标,用 debug 时显示蓝图标;用 warn 时显示黄图标;用 error 时显示红图标。

你可以输出多个值,用逗号隔开即可,方便在同一行输出对象和数组,例如:console.log('Kings: ', kings);

 

输出数据表格

console.table() 可以用来输出数组或者对象列表,以一种合适的表格形式显示。

例如:console.table([[10, true, "blue"],[5, false]])将输出以下格式:

如果元素的数量不匹配,表格将显示 undefined表示没有数据。

自定义列名,属性名必须在对象中指定元素。自定义(index)的值,可以给每个属性命名。

第二个可选的变量允许你明确指定哪一列要输出。

console.table({“London”:{population:8173194, country:”UK”, elevation:”24m”},”New York”:{population:8336697, country:”USA”, elevation:”10m”}},[“population”, “country”])

结果如下:

 

Assert

console.assert() 用于测试表达式的真假。

它有两个参数:表达式和显示信息。如果表达式是 FALSE 时,信息将会显示。

例如:console.assert(!true, 'This is not true');输出“‘This is not true”。console.assert(true, 'This is not true');什么也不输出。

 

使用控制台定时器

使用 console.time(label),定时器在控制台启动。字符串 label是必须的,我们想停止它时,有个定时器引用。调用 console.timeEnd(label)定时器停止,控制台输出定时器执行的毫秒数(通过 label 识别)。

 

持久控制台

有时页面加载时,你需要保留控制台信息。有时在点击或离开页面时,我们需要这个作为参考或者用来查看日志。

在 Chrome 里,右键点击控制台,显示菜单里有”Preserve Log upon Navigation“,选择它将保存你的控制台内容。

Firefox 默认会保存控制台信息。你可以点击右上角”清除“按钮清除控制台日志,或者打开/关闭工具。

在 Firebug 里,有个显著的按钮用来保持控制台内容,就在控制台的上部。

Opera 默认保存控制台内容,你可以右键选择”clear console“清除控制台日志或者重开工具。

 

重新运行命令

如果已经在 JavaScript 控制台输入过命令,你想重新运行它,简单点一下”“箭头即可翻看原先的命令列表。

 

任意 Tab 打开控制台

在 Chrome ,尽管控制台有自己的 tab ,在任意 tab 按下”ESC“键即可打开控制台,因此不必切换 tab 了。

Safari 控制台在开发工具的底部,”ESC”键用来切换控制台日志的可见性。在命令行执行一个命令也将打开控制台日志。

在 Firefox ,快速切换到控制台:”Ctrl + Shift + K “(Windows),”Cmd ⌘ + Option ⌥ + K“(Mac)。

 

改变框架焦点

用命令行运行 JavaScript 非常实用,但是如果页面有 iframe ,你又不知道如何定位框架,就不好办了。

在 Firebug ,你可以用下面的命令聚焦框架: cd(window.frames[‘frameName’]);

Chrome 可以在控制台底部的下拉列表中改变框架。

Opera 在”Console 控制台”和”Documents 文档” 有个改变框架的下拉菜单。

你可以通过 document.getElementsByTagName("iframe");获得 iframe 列表。

 

引用当前和前一个元素

如果你的”Elements”标签选择了一个元素,你可以用 $0调用它。输入 $0.innerHTML试试看。

在 Firebug 和 Opera,你可以用 $1选择前一个元素。

在 Chrome 和 Safari,你可以通过 $1 - $4选择更靠前的元素。

在 Firebug ,你可以通过 $n(2) - $n(5)选择更靠前的元素。

 

最终求值表达式

如果你需要先前表达式的结果用于后面的求值,你可以使用便利 $_,最终表达式结果自动展示给你。

Firebug 1.12 开始支持。

检查

通过面包屑导航 DOM

当你检查 DOM 树的节点时,节点的 DOM 路径面包屑列表显示在开发工具里。

Chrome 和 Opera,显示在 DOM 检查器的底部。

Firebug,Firefox 和 Safari,显示在 DOM 检查器的顶部。

你可以直接点击节点,或者按箭头键导航面包屑。按左箭头是父节点,按右箭头是第一个子项。上下箭头导航到下一个或前一个子节点。没有更多子节点,上下箭头导航回到 DOM 树。

在 Firefox ,你可以右击面包屑看兄弟节点列表,可以快速导航到兄弟节点。

在 Safari,你可以左击面包屑看兄弟节点。

 

搜索 DOM 节点

在 Firefox ,你可以在”检查器”面板搜索特别的节点。面包屑右边有个小的搜索框有同样作用。

聚焦时搜索框变大。

输入一个匹配的选择器, DOM 树将自动高亮它。

在 Chrome ,你可以按 Ctrl-F 打开对话框,CSS 选择器如期工作。

 

检查字体

Firefox 有个字体检查器,可以查看当前元素使用的字体。

你可以修改默认的”Abc”文字,在字体列表底部有个按钮,可以显示页面所有字体。

 

浏览你的响应式网站

在响应式设计时代,最重要的是如何在任意尺寸的设备查看我们的网站。尽管我们可以调整浏览器大小,开发工具里还是有一些其它的工具可用。

在 Chrome 开发工具的”设置“面板(工具右下角点击齿轮),在”Overrides“标签,你会发现”Device Metrics 设备指标“选项,你可以指定宽度和高度,以及字体缩放尺寸。你可以把开发工具停靠在右侧,然后调整页面大小测试。

Firefox 开发工具内置一个’响应式设计模式‘工具,此工具在开发工具的右上角。它包含一些预设的尺寸,你可以添加需要的尺寸。Firefox 也提供旋转的选项,你可以测试 landscape 和 portrait 模式。

 

3D 视图

Firefox 开发工具可以 3D 视图查看你的网站,可以方便地查看元素嵌套关系,点击开发工具右上角立方体图标可以启动它。

编辑

 

改变 CSS 值

如果有个元素需要修改 margin,padding,width 或者 height,可以使用方向键增加/减少尺寸。简单使用上下方向键增加/减少1个单位。

“Shift” + 上下方向键,可以增加/减少10个单位;”Alt” + 上下方向键,可以增加/减少0.1个单位。

“Shift” + Page-Up / Page-Down,可以增加/减少100个单位。

当你矫正尺寸时,这些快捷键非常实用。

 

改变 :active, :hover, :focus, :visited 状态样式

在开发工具里修改 CSS 非常爽,但是碰到 hover 之类的伪类就有点挠头了。恰好有解决方案。

Chrome 有个按钮是干这用的,在”Elements”标签右手边看到一个虚线框和光标在一起的图标,它可以切换其它状态。

Firebug 的 HTML 标签右侧,点击样式小箭头,可以选择想要的状态。Firebug 并没提供 :visited 状态选项。

Firefox 为你选择的 DOM 元素提供一个下拉菜单,右键选择”查看元素”可以看到它,Firefox 同样没提供 :visited 状态选项。

在 Opera,”样式”标签有个像列表的图标,Opera 提供了 :link 和 ::selection 选项。在新版 Opera ,位置跟 Chrome 一致了。

在 Safari,DOM 上右击一个元素,显示一个菜单,里面有”Force Psuedo-Classes”选项。

 

拖拽重排元素

在 Chrome 和 Safari 里,”Elements “标签下,可以拖拽重排元素顺序。简单点击拖动元素即可,目标位置会出现一条线。

 

使用 SASS Source Maps

使用 CSS 预处理器有许多优势,但是在浏览器开发工具中修改比较困难。例如,当你再次运行 SASS 时, 在开发工具中保存的编译后CSS 可能被覆盖,不太理想。SASS 3.3 以上(可以安装使用’sass gem install sass –pre’),为 SASS 文件创建映射很容易,你可以很容易的保存修改。

首先,为 SASS watch 命令增加 --sourcemap,像这样:

sass --watch scss/devtoolsecrets.scss:css/devtoolsecrets.min.css --style compressed --sourcemap

然后在 SASS 文件底部添加映射文件的名字(sourceMappingURL):

/*@ sourceMappingURL=devtoolsecrets.css.map */

然后,你需要启用”Experiments 实验“。地址栏输入 chrome://flags 启用”启用开发者工具实验”选项,点击页面底部”马上重启”按钮应用改变。在 Chrome 开发工具的右下角,点击齿轮按钮打开”设置“面板。

点击”General 常规“标签,激活”Enable Source Maps 启用 Source Maps “。点击”Experiments 实验”标签,检查”Support for SASS 支持 SASS “选项。

重启浏览器,你可以直接查看 SASS 文件的行号了。

调试

 

用 debugger; 调试

添加此行代码:debugger;可以自动创建断点,当开发工具打开时运行,断点会自动创建。

尽管快速添加断点很方便,不用在开发工具一行一行找,小心不要把 debugger; 提交到线上环境。

 

条件断点

不必每次生效时,条件断点很有用。例如,你知道你的代码在最后一项有 bug,你可以用条件判断在最后一项时激活 debugger。条件满足,断点触发。

在 Chrome 中创建条件断点,先创建个正常的断点,然后右击断点选择”编辑断点“添加条件。

在 Firebug ,先创建常规断点,然后右击出现输入框,可以添加条件。

在 Firefox ,右击想创建断点的行,选择”增加条件断点“。

在 IE,先创建常规断点,然后右击断点,选择”条件…“。

在 Opera,先创建常规断点,然后右击断点,选择”添加条件“。

在 Safari,确保脚本和”调试器”面板都打开,创建一个断点,然后在”调试器”面板右击同样的断点,选择”编辑断点“。

 

DOM 断点

如果特定的 DOM 改变,你的页面会被破坏,或者你只想找出元素属性或子元素改变,哪些代码生效,Chrome 和 Firebug 均可以在 DOM 修改时设置断点,你可以找到代码问题的根源。简单点击你想监控的元素,右击选择”break on“选项。

 

XHR 断点

在 Chrome ,可以为 XmlHttpRequest 设置断点,你可以调试 AJAX 请求。到”Sources“标签选择”XHR 断点“,点击右侧加号图标,输入部分或所有你想添加断点的 URL 。一旦请求返回,断点将生效,你可以看到返回的数据,并可单步调试后续操作。

取消勾选可以关掉断点,右键选择”Delete Breakpoint 删除断点“删除断点。

在 Firebug ,到网络标签选择”在 XHR 时中断“按钮,或者右键选择”在 XHR 时中断“,你也可以随意选择中断条件。

 

检查断点的作用域

在 Chrome ,Javascript 在断点处暂停时,你可以查看当前作用域的所有变量和对象,既可以悬浮查看,也可以通过控制台查看。

Firebug 有同样的选项,但是需要在 DOM 菜单选择”show closures“。 如果断点设置恰当,这个强大的属性让你很容易查看闭包里的变量。

Firebug 有额外的功能,无需在断点停止,即可访问隐藏的闭包变量。看此例:

function Person(name) {
  this.introduce = function() {
      console.log("Hello, my name is %s", name);
  }
}
// create an instance of Person: var someone = new Person("Arthur"); 
// we call a closure! someone.introduce(); 
// prints "Hello, my name is Arthur" 

代码访问以下闭包变量: closure.%variable 以上例子,你将用这个表达式访问 name:someone.introduce.%name // ==> “Arthur” 注意你也可以改变值:

someone.introduce.%name = "Trillian"; someone.introduce(); // prints "Hello, my name is Trillian"

Firebug 中,需要 JavaScript 的地方,同样的语法都会生效,例如监控面板和条件断点。

 

监控值

在”脚本”标签的右上角,监控变量相当容易,只有输入变量名,”监控”将让它的值保持更新。

 

调试压缩后的 JavaScript

下断点让 JavaScript 调试更容易,但是如果代码已经放到生成环境,很可能已被压缩。如何调试最小化的代码呢?庆幸的是一些浏览器已经支持解压你的 JavaScript 。

在 Chrome 和 Safari ,选择”脚本”标签,找到相应的文件,然后点击”{}”图标(pretty print,在面板底部)。

在 IE ,点击工具图标选择下拉菜单,找到格式化 JavaScript 选项。

Opera 自动格式化压缩的 JavaScript 。

 

使用 JavaScript Source Maps

当我们部署代码到生产环境时,比较明智的是压缩代码减少加载时间。压缩去除了无用的字符(比如注释),空行和空格。可是压缩后很难调试,无法单步调试,代码不易读。JavaScript source maps 调试压缩后 JavaScript 文件非常有用,它提供一个映射关联到未压缩文件。

创建 JavaScript source maps ,下载 Google Closure Compiler ,它帮你生成 .map 文件。

运行带 Source Map 属性的 Closure Compiler :

java -jar compiler.jar --js common.js --create_source_map ./common.js.map --source_map_format=V3 --js_output_file common.min.js

在压缩后的 JS 文件底部加上映射文件的名字: sourceMappingURL

//@ sourceMappingURL=common.js.map

在 Chrome 开发工具,”Settings 设置”菜单 -> “General 常规”标签,激活”Enable Source Maps 启用 Source Maps “。

现在,当你调试 JavaScript 时,可以用未压缩的版本查找问题所在。

 

模拟User Agent

有时伪装成不同的浏览器或设备用于调试,特别是某个网站用到了设备探测。

在 Chrome ,打开设置菜单(右下角齿轮图标),选择”Overrides”选项,找到 “User Agent”选项。你可以选择内置的选项,也可以选择”Other”自己添加。如果你选择移动或平板设备, Chrome 将调整浏览器尺寸 – 取消勾选”Device Metrics”,很容易关掉此功能。

在 Opera ,点击浏览器左下”面板”箭头(开发工具以上),选择 + ,然后选择”自定义”,到”按钮”标签选择”首选项”,然后拖住”识别为 Opera “下拉框,拖到浏览器工具栏。

 

模拟触控设备

Chrome 可以伪装成支持触控的设备,直接在浏览器模拟 touch 事件。在设置面板(Chrome 开发工具右下角齿轮图标),选择”Overrides”选项,选择”Emulate Touch Events 模拟触控事件”。

在 Chrome Canary ,用个圆形代替了光标,可以用于区分处于哪种模式。

 

覆盖地理位置

如果你的应用用到了 Geolocation ,模拟不同的位置会非常有用。在 Chrome ,”设置”菜单,选择”Overrides”标签,这里可以模拟不同的经度纬度,也可以模拟不可用的位置。

在 Google Maps Labs 启用了坐标提示,你就可以从 Google Maps 获得位置的经纬度。

 

重写设备方向

设备方向改变可以在 Chrome 中模拟。”Settings “-> “Overrides”,选择”Override Device Orientation”,在输入框输入新值。

Alpha 代表沿 z 轴 0-360 度。 Beta 代表沿 x 轴 -180 到 180 度 – 前到后运动 Gamma 代表沿 y 轴 -90 到 90 度 – 左到右运动

改变值将触发 deviceorientation 事件。

 

调试 Canvas 元素

Chrome 可以用开发工具调试 canvas 元素,可用于 2D 和 WebGL canvas 项目。

首先启用”Experiments”标签,地址栏输入 chrome://flags ,启用”Enable Developer Tools experiments”,按下”Relaunch Now”按钮应用改变。到设置面板,找到”Experiments”标签,选择”Canvas inspection”选项。

现在访问”Profile”标签,你可以看到”Capture Canvas Frame 捕获 Canvas 帧”选项。使用期间可能需要重载页面。按下”Start 开始”捕获 canvas 应用的单个帧。你也可以点击下面的框,切换到”Consecutive Frames 连续帧”,你可以捕获多帧。

每次访问 canvas Chrome 会创建日志,提供每次访问上下文的列表以及快照。你可以点击一个日志项重播那帧,看看哪些命令被调用,及它们在哪一行。

 

运行代码片段

如果你发现同样的代码需要重复的运行,Chrome Canary(Chrome 29 已有此功能) 提供了便捷的”Snippets 片段”区域,你可以保存代码。

在”Source”标签,”Sources”和”Content scripts”后面有个”Snippets “标签,右键点击空区域,点”New”创建新的片段,写入一些代码,无论何时再想运行它时,右键点击选择”Run 运行”即可。

Firefox 6 + 的代码片段速记器(开发工具右上角小本子图标)跟这很类似。

性能

 

禁用浏览器缓存

每个浏览器都可以禁用网页的缓存,确保资源每次都从服务器加载。

Chrome ,设置小齿轮里找,”General”-> “Disable cache”。

IE 菜单栏的”Cache 缓存”下面。

Opera,点击网络标签清除缓存,选择”网络选项”-> “禁用所有缓存”

Firebug,网络标签 -> 下拉菜单”禁用浏览器缓存”

在任何浏览器呼出清除缓存对话框,Ctrl + Shift + Delete(Windows),Shift + Cmd + Backspace(Mac)。

 

排序网络请求找到瓶颈

在网络标签按顺序显示每个请求的资源,点击每列的标题可以重新排序。

大部分的浏览器在网络标签共享公共字段,你可以通过文件名;域名;资源类型;HTTP 状态;方法和资源大小这些字段排序。

在 IE 中,文件名和域名字段合并了。

Chrome 更进一步,点击”Timeline”字段显示额外的排序选项:

  • Start Time 默认选项,按每个请求开始时间排序
  • Response Time 按网络请求获得响应的时间排序
  • End Time 按请求完成时间排序
  • Duration 按请求完成花费时间排序
  • Latency 浏览器初始请求到接收响应的时间总和。以等待时间排序,可以看看哪个资源占用了大量时间等待响应。等待时间依赖于用户距服务器的距离,设置 Content Delivery Networks (CDN)可以改善此时间。合并 CSS 和 JavaScript 文件,图像拼接可以减少资源请求数,因此减少总延迟。
 

网络时间轴导出为 HAR 文件

HAR(HTTP 存档)文件可以用于各种性能分析技术和调试。测试提 bug 时可以附上 HAR 文件 – 开发人员可以在本地运行 HAR 数据查找问题原因。

我们可以用 Chrome 开发工具导出网络标签时间轴,右键点击网络输入,选择”Save as HAR with Content”。

Firebug 需要另安装插件 Net-export,此工具由 Firebug 开发主管和 HAR 格式创造者开发。

chromeHAR 是个在线工具,提供跟 Chrome 一样的时间轴界面,功能类似。

 

检查 DOMContentLoad 和 Load 事件

Chrome 和 Safari (以及 Firebug 网络面板)的网络时间轴显示网页加载有多快,用一条线标记 DOMContentLoaded 和 load 事件触发的时机。

  • 当浏览器解析文档完毕(但是其他资源比如图像,样式表可能未下载完毕)DOMContentLoaded 触发,它用蓝线标识。
  • 当所有初始资源(图像,样式表,JavaScript)加载完毕,load 事件触发一次,它用红线标识。
  • 当两个事件同时触发,标识线是紫色的。

在 Safari ,标识线是虚线。

 

重发送 XHR 请求

如果希望重发送 XHR 请求,但不想刷新页面或重触发事件,可以右键点击资源,选择”Replay XHR”(Firebug 叫”Resend”)。

 

测量渲染性能和 FPS

Chrome 提供了帧率时间轴,可以逐帧调试网站。

要创建帧时间轴,首先打开 Chrome 开发工具,选择”Timeline”标签,底部黑色的圆形代表”record 记录”,按下开始时间轴记录,按第二次停止记录。记录的同时,你可以跟网页正常交互,帧模式会记录所有帧的行为。

时间轴图表每一条代表单帧动画,不同的颜色表示如下: 蓝色表示加载任务,黄色表示脚本任务,紫色表示渲染任务,绿色表示绘制任务,白色区域代表空闲时间。

时间轴图表下面是网页性能的瀑布图,帧显示在标题列,标题单元格还包含画这帧花费的毫秒数;相应的动作也记录在左侧。

你可以拖动两个灰色的鼠标滑块,改变你想检查的帧的数量。

悬停在时间轴的标题行显示帧的持续时间;FPS 数值;CPU 时间和与帧交互的合计时间。

悬停在左侧的记录上面,可以看到每个任务的持续时间;还有其它有用信息。如果有页面相关的部分,则会高亮,有些任务被分组了,点击瀑布图的箭头查看。

移动端

 

开发工具调试 IOS

把 IOS 设备连接到可用的 Mac,打开 Mac 和 IOS 设备的 Safari 。

找到 Safari 的”Develop 开发”菜单,第一个菜单分隔线的后面应该是你要连接的 IOS 设备的名字。在子菜单选择你想调试的页面。

Safari 的开发工具将以弹出窗口的式出现,你可以调试移动设备的站点了。

 

开发工具调试 Android

你可以用Mac 上的 Chrome Canary 开发工具调试安卓设备上的公共和本地网站,你可以在手机上访问 Chrome 开发工具的广泛的特性集。

首先,需要在安卓设备安装 Chrome BETA 。

然后,需要下载 ADB 插件扩展,安装到 Chrome Canary 上。从未在 Google Play 商店下载过的话,需要拖拽文件到扩展页 (chrome://extensions/)。

确保已经在 chrome://flags 里面打开”Enable Developer Tools experiments 启用开发工具实验”。

手机用 USB 线插到电脑上,在手机找到”设置”,选择”开发人员选项”,确保”USB 调试”选上。如果它已经选上,而你以前从未用过 USB 调试,取消选择,重选一次,确保它有此计算机的 MAC 地址。

现在到安卓上的 Chrome BETA ,点击菜单图标和”Settings 设置”,确保”Enable USB Web debugging 启用 USB Web 调试”启用。打开新标签。

在 Chrome Canary ,点击 ADB 插件图标,点击”Start ADB”,需要重启浏览器。

访问检查页(chrome://inspect ),找到设备(需要 Chrome Canary 28 +),找到要调试的标签。点击页面 URL 右侧的”Inspect 检查”链接。

弹出”Settings 设置”窗口,点击”Experiments 实验”标签,启用”Reverse Port Forwarding “,你需要关闭窗口重启开发工具,”Port Forwarding”标签出现之前,再点”Inspect 查看”链接。

在 Port Forwarding 标签,输入想转发的端口(例如 9000),地址,应该可以映射到本地的电脑了。现在,在移动设备输入 localhost:端口号(如 localhost:9000),本地的站点应该加载到移动设备上了,并且可以调试了。

扩展

 

覆盖地理位置

在 Firefox ,位置 API 可以像 Chrome 一样覆盖,需要 Geolocater 扩展 。

安装后到”Tools”工具菜单,”Geolocater”,”Manage 管理”,在这你可以通过浏览地图或搜索位置,直接添加”伪造的”地理位置。你可以覆盖先前预设的地理位置。可以到 html5demos for Geolocation 页试试。

特别声明:本文不是W3cplus原创或者译文,个人觉得本文实用价值高,特意转载至此,如需转载,请注明译文出处:

http://jinlong.github.io/blog/2013/08/29/devtoolsecrets