窗窗meta標籤的理解

本文轉自w3cplus

作者:大漠 日期:2013-02-02 点击:789
 

特别声明:此篇文章由杨礼鑫根据Paulund的英文文章原名《Understanding The Viewport Meta Tag》进行翻译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://www.paulund.co.uk/understanding-the-viewport-meta-tag以及作者相关信息

——作者:Paulund

——译者:杨礼鑫

在设计网页时,响应式设计是众多考虑之一。有一个问题就是,你做的网站到底需不需要响应式设计?

在我认为所有面向大众的网站都应该把响应式设计纳入考虑范围。当然一些朋友会觉得这没必要,因为在使用 移动设备的时候可以利用缩放来浏览我们感兴趣的内容,但我还是认为开发人员应该让你的网站在任何设备上都方便浏览。

什么是响应式设计?

响应式设计是一种让你的网页在不同尺寸的设备上都能够自适应的设计方式,依据你设置的断点,通过CSS文件的媒体查询改变网页元素的样式来实现。仅仅在一些元素上添加width:100%样式都能够让他们适应不同的屏幕。

断点会为不同宽度范围下的内容指定各自的CSS样式,特别是比如一些尺寸不一样的手机,7英寸平板,10英寸平板,13英寸笔记本和一般的显示器。

你可以使用像素宽度或者像素比来定义断点。下面一段代码教你如何使用 媒体查询

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width : 320px) and (max-width : 480px) {
  /* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
  /* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
  /* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
  /* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {
  /* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
  /* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
  /* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
  /* Styles */
}
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
  /* Styles */
}	

Boilerplate media queries

扩展阅读

  1. CSS3 Media Queries
  2. CSS3 Media Queries模板
  3. 使用em单位创建CSS3的Media Queries 主标签
  4. Responsive设计和CSS3 Media Queries的结合
  5. iPads和iPones的Media Queries
  6. 此像素非彼像素

定义视窗

视窗meta标签能告诉浏览器如何规范的渲染网页,然而你则需要告诉它视窗有多大。

视窗就是我们能看到页面的部分。举个栗子:好比你在手机上浏览网站,当你放大页面去看左上角的内容时,视窗的宽度会被设置为定值;当你已经能够看到整个的网页宽度,继续缩小页面时,视窗的宽度则会跟页面的宽度一致。

下面的例子给出了视窗meta标签的用法。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">	

代码以显示网页的屏幕宽度定义了视窗宽度。网页的比例和最大比例被设置为100%。

不同的浏览器视窗不同。大部分移动端浏览器都是用默认的980px宽度的视窗,这表示绘制网页时宽度是980px,通过缩小才能浏览整个网页。

屏幕尺寸越小的设备,在其显示的网页被显示的越小。如果你对比同一个网站分别在iphone和ipad上浏览,你会发现它在爱疯上会小得多。

改变视窗的赋值能够让你制定设备如何绘制网页。

视窗宽度

指定视窗宽就仿佛告诉了浏览器你的网页在这个宽度下显示是最合适的。你要是做了一个专门在iPhone上浏览的网页,那么你就设置视窗宽为320px.

<meta name="viewport" content="width=320">	

但是这不易于 响应式设计,因为当你在平板上浏览它的时候,它会被缩小到320px的区域中。在响应式设计中最好指定视窗宽和设备的屏宽一致。

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

视窗缩放

在移动端,屏幕上开合手指可以控制缩放,但当你设定视窗宽和设备宽度一致时,你就没必要去放大浏览整个网页了。为了确保网页的初始显示不是放大过的,你可以用initial-scale属性来设置初值。

若用户在浏览过程中不需要缩放,你可以设置它为1。

<meta name="viewport" content="initial-scale=1">	

甚至是如果你连用户的滚屏操作都想禁止,你可以设置maximum-scale为1,这样就完全不能放大了。

<meta name="viewport" content="maximum-scale=1">	

几个视窗的例子

下图说明了一张图片在两个不同视窗中的显示。第一张是默认980px宽度视窗下的图片显示,第二章是320px宽度的视窗。

视窗980

视窗980

图片来自于:Apple explanation of viewport meta tag

视窗的理解

如果你还想看看更多关于使用不同尺寸视窗的例子,这儿有个Github项目包含了多视窗的设定。这个链接里面是一个移动端浏览器,从那你可以直观的看到效果。

理解视窗

译者手语:初次翻译前端技术博文,整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

关于杨礼鑫

毕业于武汉大学,是一名专业的PHP程序员。强烈的兴趣爱好在计算机图形学,特效,3D和游戏,还有前端,才培养的;喜欢设计和创意。欢迎随时关注我:新浪微博

如需转载烦请注明出处:

英文原文:http://www.paulund.co.uk/understanding-the-viewport-meta-tag

中文译文:http://www.w3cplus.com/css/understanding-the-viewport-meta-tag.html

CSS權重

你應該知道的一些事情——CSS權重

文章轉自w3cplus
 
作者:99 日期:2012-12-21 点击:1500
 

本文由99根据的《CSS Specificity: Things You Should Know 》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know,以及作者相关信息

作者:

译者:99

除了浮动之外,css权重问题是你要了解的,最复杂的一个概念之一。css每条规则权重的不同,是你所期望的效果,没有通过css规则在元素上生效的主要原因。为了减少调试bug的时间,你需要了解浏览器是怎样解析你的代码的。为了完成这个目标,你需要对权重是如何工作的,有一个清楚的认识。很多Css出现问题的场景,都是某处定义了一个更高权重的规则,导致此处规则不生效。

Css权重问题并不简单,而且有很多或具体或抽象的理论来解释这个问题。本文也将探讨这个问题,我相信如果你喜欢星球大战的话你肯定会理解这些概念的~

我们将会讨论关于css权重的主要问题,包括例子,规则,原理,通用解决方案以及一些资源。

CSS权重:概述

  1. 权重决定了哪一条规则会被浏览器应用在元素上。
  2. 权重的不同,是你所期望的效果,没有通过css规则在元素上生效的主要原因。
  3. 权重的级别划分时包含了所有的css选择器
  4. 如果两个选择器作用在同一元素上,则权重高者生效。
  5. 权重的级别根据选择器被划分为四个分类:行内样式,id,类与属性,以及元素。
  6. 你可以通过CSS权重之争进一步了解CSS权重。
  7. 你也可以通过CSS Specificity for Poker Players进一步了解CSS权重。
  8. 如果两个选择器权重值相同,则最后定义的规则被计算到权重中(后面定度的CSS规则权重要更大,会取代前面的CSS规则)
  9. 如果两个选择器权重值不同,则权重大的规则被计算到权重中
  10. 如果一条规则包含了更高权重的选择器,那么这个规则权重更高
  11. 最后定义的规则会覆盖所有跟前面冲突的规则
  12. 内联样式表含有比别的规则更高的权重
  13. Id选择器的权重比属性选择器更高
  14. 你可以使用id来增大权重
  15. 类选择器比任意数量的元素选择器都高
  16. 通配符选择器跟继承来的样式,他们的权重以 0,0,0,0来计算
  17. 你可以用css权重计算器来计算权重。

什么是CSS权重?

  1. 权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。参考阅读【Understanding specificity
  2. 当很多的规则被应用到某一个元素上时,权重是一个决定哪种规则生效,或者是优先级的过程。参考阅读【Selector Specificity
  3. 每个选择器都有自己的权重。你的每条css规则,都包含一个权重级别。 这个级别是由不同的选择器加权计算的,通过权重,不同的样式最终会作用到你的网页中 。参考阅读【Understanding specificity
  4. 如果两个选择器同时作用到一个元素上,权重高者生效。

权重等级

每个选择器在权重级别中都有自己泾渭分明的位置。根据选择器种类的不同可以分为四类,也决定了四种不同等级的权重值。

1、行内样式,指的是html文档中定义的style

行内样式包含在你的html中 对你的元素产生直接作用,比如:

<h1 style="color: #fff;">header</h1>

2、ID选择器

Id也是元素的一种标识,比如#div

3、类,属性选择器和伪类选择器

这一类包括各种class,属性选择器,伪类选择器比如 :hover,:focus等等。

4、元素和伪元素

元素跟伪元素选择器,比如:before 与 :after.

 

这里我要补充的:伪元素选择器只包含以下几种:

  1. ::after
  2. ::before
  3. ::first-letter
  4. ::first-line
  5. ::selecton

详细请参阅【Pseudo-elements

伪元素跟伪类都是选择器的补充,但是,伪类表示的是一种“状态”比如hover,active等等,而伪元素表示文档的某个确定部分的表现,比如::first-line 伪元素只作用于你前面元素选择器确定的一个元素的第一行。

注意,伪元素选择器选择出来的“部分” 不在dom里,也不能对其绑定事件。如果你对伪元素前面的选择器定义的元素绑定了事件,伪元素同样会生效。 永远记得 伪元素生成的是“表现”。

扩展阅读:

  1. 如何给伪元素绑定事件
  2. w3c规范中的伪元素

99

 

如果您对CSS选择器还不太了解,或者说不太清楚CSS有哪些选择器,个人建议你先阅读以下几篇文章,这样更有助于帮助你阅读本文后面的内容:

  1. 《CSS3基本选择器》
  2. 《CSS3属性选择器》
  3. 《CSS3伪类选择器》
  4. 《CSS选择器优化》

大漠

如果你还分不清楚这些是怎么分类的,你可以看一下文章末尾的一个简短的分类。

怎么确定权重

权重记忆口诀。从0开始,一个行内样式+1000,一个id+100,一个属性选择器/class或者伪类+10,一个元素名,或者伪元素+1.比如

body #content .data img:hover

最终的权重值是0122;#content是一个id选择器加了100,.data是一个class类选择器加了10,:hover伪类选择器加了10, body和img是元素加了1 。详细参阅【CSS Specificity

另一种方法:计算有几个id选择器的数量为a ,计算其他属性跟class选择器的数量为b ,计算元素名跟伪元素名的数量为c ,然后结合起来就是权重。详细参阅【CSS Selector Specificity]

为了帮助我更好的理解权重的概念,我制作了一张西斯人物能量表(大家可以自动类比为各种赛亚人,奥特曼战斗力对照表)每个角色(选择器)都拥有西斯能量(权重值,就跟赛亚人的战斗力一样),这个决定了这个人在黑暗势力里有多牛逼,也决定了css规则在你的样式表里有多牛逼。详细参阅【CSS Specificity Wars – Cheat Sheet

oocss

权重计算测试

利用第一个规则可以很容易计算权重,你可以自己试试看看掌握了没

01. *{}                         ====》0
02. li{}                        ====》1(一个元素)
03. li:first-line{}             ====》2(一个元素,一个伪元素)
04. ul li {}                    ====》2(两个元素)
05. ul ol+li{}                  ====》3(三个元素)
06. h1+ *[rel=up] {}            ====》11(一个属性选择器,一个元素)
07. ul ol li.red{}              ====》13(一个类,三个元素)
08. li.red.level{}              ====》21(两个类,一个元素)
09. style=""                    ====》1000(一个行内样式)
10. p {}                        ====》1(一个元素)
11. div p {}                    ====》2(两个元素)
12. .sith {}                    ====》10(一个类)
13. div p.sith{}                ====》12(一个类,两个元素)
14. #sith{}                     ====》100(一个ID选择器)
15. body #darkside .sith p {}   ====》112(1+100+10+1,一个Id选择器,一个类,两个元素)

权重的基本规则

1、相同的权重:以后面出现的选择器为最后规则:

假如在外部样式表中,同一个CSS规则你写了两次,那么出现在前面的选择器权重低,你的样式会选择后面的样式:

#content h1 {
  padding: 5px;
}

#content h1 {
  padding: 10px;
}

两个选择器的权重都是0,1,0,1,最后那个规则生效。

2、不同的权重,权重值高则生效

选择器可能会包含一个或者多个与权重相关的计算点,若经过计算得到的权重值越大,则认为这个选择器的权重高。详细参阅【Understanding Specificity

CSS权重规则

1、包含更高权重选择器的一条规则拥有更高的权重。详细参阅【Understanding Specificity

2、Id选择器的权重比属性选择器高,比如下面的例子里 样式表中#p123的权重明显比[id=p123]的权重要高。

A:
a#a-02 { background-image : url(n.gif); }

and

B:
a[id="a-02"] { background-image : url(n.png); }

因此A规则比B规则的权重要高。详细参阅【W3C CSS 2.1 Specification

3、带有上下文关系的选择器比单纯的元素选择器权重要高。这条规则同样也适用于含有多个元素的选择器。详细参阅【Cascade Inheritance

4、与元素“挨得近”的规则生效,比如css中我们定义了以下的规则,

#content h1 {
  padding: 5px;
}

但html 中也定义了规则:

<style type="text/css">
  #content h1 {
    padding: 10px;
  }
</style>

Html中定义的规则因为跟元素挨得比较近,所以生效。详细参阅【Understanding Specificity

5、最后定义的这条规则会覆盖上面与之冲突的规则。比如下面的例子:

p { color: red; background: yellow }
p { color: green }

段落会呈现绿色的文字。当然也会出现黄色的背景,因为第一条规则只是被覆盖了color属性。详细参阅【BrainJar.com

6、无论多少个元素组成的选择器,都没有一个class选择器权重高。比如说“.introduction”高于“html body div div h2 p”。详细参阅【CSS Specificity for Poker Players

7、通配符选择器也有权重,权重被认为是 0,0,0,0。比如 *, body * 被继承的css属性也带有权重,权重是0,0,0,0。详细参阅【CSS Specificity Clarified

权重的例子

考虑三个代码片段:

A: h1

B: #content h1

C:
<div id="content">
  <h1 style="color: #fff">Headline</h1>
</div>

A的权重是0,0,0,1 (一个元素),B的权重是0,1,0,1(一个id选择器,一个元素),c的权重是1,0,0,0 ,这是一个行内样式。

因为0001 = 1 < 0101 = 101 < 1000,第三个规则权重最高,因此第三个规则将会生效。若去掉第三个规则,第二个规则将会生效。

权重实战

1、利用LVHA原理来给链接应用样式:如果你想展现不同状态的链接样式,一定要记住link-visited-hover-active的顺序,或者简写为LVHA。详细参阅【Link Specificity

2、永远都不要使用“!important”:“如果你遇到了权重问题,第一个解决方法肯定是去掉“!important”,“!important”会覆盖所有的样式规则,但“!important”根本没有结构与上下文可言,所以很少用到。详细参阅【Understanding SpecificitySelector Specificity

3、利用id增加选择器权重:利用ul#blogroll a.highlight代替a.highlight ,权重由0, 0, 1, 1 变成了0, 1, 1, 2。

4、减少选择器的个数:“在css规则中尽可能的使用较少的选择器”。详细阅读【Understanding Specificity

CSS权重计算工具及资源

1、扑克牌权重计算法

如果你之前没有编程经验,css让你看得比较晕,这个比喻可以帮你把一些概念弄得更清楚。把css规则作为你手中的牌,最好的一套牌决定了你最终的样式。

2、Css权重计算器

计算这个选择器的权重

3、Understanding Specificity Tutorial

在这个教程中,你会关注权重。css权重关系到你的css规则是怎样显示的。你样式表中的每条css规则都带有一个权重,这个权重级别是由不同的选择器加权计算的,通过权重,不同的样式最终会作用到你的网页中。

4、Cascade Inheritance: Specificity

这里会对权重问题进行一番讨论。这些规则不仅仅存在于一张样式表中,也有可能是多张样式表。首先要明白,一个元素可以被多个规则定义样式。

5、CSS 2.1 Selectors Explained

对css2.1选择器的一个全面的阐述。通过详尽的了解css2.1的选择器,可以很大程度上优化你的html,比如减少不必要的class属性,增加大量的div或者span标签等。

6、CSS Specificity Bugs in IE

Ie中权重bug的一个简短概述

7、CSS Structure and Rules

基本的css语法,伪类及伪元素,还有层叠规则。

8、Specificity

他看上去不怎么重要,你也可能一直用不上,但是在大的项目中,你的CSS文件变得越来越大,那么这个时候你的CSS就有可能会产生冲突。

什么是什么?

1、一个选择器给元素定义了一个独特的样式。

p { padding: 10px; }

2、一个类选择器利用类(在页面中可能会有多个)定义选择器

p.section { padding: 10px; }

3、一个id选择器利用页面中唯一一个id标识符定义一个选择器

CSS: #section { padding: 10px; }

(X)HTML: <p id="section">Text</>

4、上下文选择器可以定义一个带有层级关系顺序的规则

p span { font-style: italic; }

上面这一条,所有在p元素中的span元素将会被应用样式"font-style: italic;"。

5、一个属性选择器匹配了一个带有特殊属性或者属性的值的元素

p[title] { font-weight: bold; }

匹配所有带有title属性的元素

6、伪类,是一种特殊的class,用来定义html元素的行为。一般都是用来给一些html元素的特定状态定义特殊效果。当触发这个状态时,效果也会生效。

a:visited { text-decoration: underline; }

7、伪元素,让设计者可以给实际不存在于文档中的内容定义样式。伪元素属于特殊的元素,可以利用伪元素来“凭空”生成内容,列表项的数字等。

p:first-line { font-variant: small-caps; }
a:link:after { content: " (" attr(href) ")"; }

 

上面罗列的是CSS选择器中的七种,但实际上CSS的选择器是不只这些,特别是CSS3,在CSS2.1的基础上增加了些很有意思的选择器,在不需要类名的情况下都能帮你选择到需要的元素。感兴趣的话可以阅读下列的文章:

  1. 《CSS3基本选择器》
  2. 《CSS3属性选择器》
  3. 《CSS3伪类选择器》
  4. 《CSS选择器优化》

大漠

译者手语:初次翻译前端技术博文,整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

如需转载烦请注明出处:

英文原文:http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know

中文译文:http://www.w3cplus.com/css/css-specificity-things-you-should-know.html

flat website

轉自Bashooka

 

20 EXAMPLES OF FLAT ELEMENTS IN WEB DESIGN

 


 

 

Flat design has already deserved its popularity having proved that in spite of its minimalistic approach it may be attractive, original and catching. The word boring has nothing to do in the same line of the words that are used for the description of the trend. Today Flat design is ready to reach new peaks of popularity being frequently used by designers and causing new wave of interest. So here are 20 Examples of Flat Elements in Web Design for inspiration.

PORTRAITS WITH CARTER KUSTERA

flat-webs-1

BIANCHI CAFÉ & CYCLES

flat-webs-2

ETCHAPPS

flat-webs-3

PLOVER

flat-webs-4

BUSINESS ESSENTIALS PREMIUM WORDPRESS THEME

flat-webs-5

MINIMAL MONKEY

flat-webs-6

SPENDEE

flat-webs-7

FAR FROM THE TREE

flat-webs-8

EVERY LAST DROP

flat-webs-9

COMBADI

flat-webs-10

BUFFALO

flat-webs-11

SUPEREIGHT STUDIO

flat-webs-12

LORENZO VERZINI

flat-webs-13

DATA DRIVEN LONDON

flat-webs-14

VIENS-LA

flat-webs-15

POLLEN

flat-webs-16

EVERYTHING YOU NEED TO KNOW ABOUT DESIGN

flat-webs-17

ATELIER

flat-webs-18

AIR JORDAN

flat-webs-19

TAG

flat-webs-20

瀏覽器hack

轉自w3plus:http://www.w3cplus.com/css/browser-hacks.html

 

主流浏览器的Hack写法

作者:大漠 日期:2013-03-05 点击:725

此处的“hack”并非是网络中很神秘的组织“黑客”,而是使用他们可以帮助你解决浏览器下一些怪异和特殊的bug。很多时候对于这样的讨论也非常多,比如说在您的代码中应不应该使用hack?甚至延伸到使用“hack”是一个优秀的前端人员?其实,有时候是逼不得以,必须为之。

有关于hack的使用方法和种类,互联系网上成千上万,比较典型的介绍有:

  1. 浏览器兼容之旅的第二站:各浏览器的Hack写法
  2. Browser CSS Hacks
  3. Moving IE specific CSS into @media blocks
  4. Detecting browsers javascript hacks
  5. Browser Specific Hacks
  6. Browser-Specific CSS Hacks
  7. CSS hacks

大家平时看得多的应该是IE浏览器的hack写法比较多,但对于现代浏览器,比如说Safari、Chrome、Firefox等浏览器的hack写法并不多见,甚至有的不知道怎么写。如果您是属于后者,根本不知道各浏览器下具有哪些hack手段,不要着急。因为Hugo GiraudelTim Pietrusky将各浏览器下的hack写整理放在了Browserhacks.com之上。当然也要非常感谢Paul IrishNicolas Gallagher所做的补充与说明。为了国内前端开发者更好的查阅,我将Browserhacks.com上有关于各种浏览器的hack写法搬移到w3cplus上,以供大家翻阅与查找。

一、Chrome浏览器

选择器Hack

/* Chrome 24- and Safari 5- */
::made-up-pseudo-element, .selector {
  代码放在这里
}	

媒体查询Hacks

/* Chrome, Safari 3+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  代码放在这里	
}	

JavaScript Hack

/* Chrome */
var isChrome = Boolean(window.chrome);	

二、Firefox浏览器

属性选择器Hack

/* Firefox 1.5 */
body:empty .selector {
 样式代码放这里
}
/* Firefox 2+ */
.selector, x:-moz-any-link {
 样式代码放这里	
}
/* Firefox 3+ */
.selector, x:-moz-any-link; x:default {
 样式代码放这里	
}
/* Firefox 3.5+ */
body:not(:-moz-handler-blocked) .selector {
 样式代码放这里	
}	

媒体查询Hack

/* Firefox 3.5+, IE 9/10, Opera */
@media screen and (min-resolution: +72dpi) {
 样式代码放这里		
}
/* Firefox 3.6+ */
@media screen and (-moz-images-in-menus:0) {
 样式代码放这里		
}
/* Firefox 4+ */
@media screen and (min--moz-device-pixel-ratio:0) {
 样式代码放这里		
}	

JavaScript Hack

/* Firefox */
var isFF = !!navigator.userAgent.match(/firefox/i);

/* Firefox 2 - 13 */
var isFF = Boolean(window.globalStorage);

/* Firefox 2/3 */
var isFF = /a/[-1]=='a';

/* Firefox 3 */
var isFF = (function x(){})[-5]=='x';	

混合型Hack

/* Firefox 3+ */
@-moz-document url-prefix() {
 样式代码放这里		
}	

三、Opera浏览器

属性选择器Hack

/* Opera 9.25, Safari 2/3.1 */
*|html[xmlns*=""] .selector {
 样式代码放这里	
}

/* Opera 9.27 and below, Safari 2 */
html:first-child .selector {
 样式代码放这里	
}

/* Opera 9.5+ */
noindex:-o-prefocus, .selector {
 样式代码放这里	
}	

媒体查询Hack

/* Opera 7 */
@media all and (min-width: 0px){
 样式代码放这里		
}

/* Opera 12- */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
 样式代码放这里		
}

/* Opera, Firefox 3.5+, IE 9/10 */
@media screen and (min-resolution: +72dpi) {
 样式代码放这里		
}

/* Opera, IE 8/9/10 */
@media screen {
 样式代码放这里		
}	

JavaScript Hack

/* Opera 9.64- */
var isOpera = /^function \(/.test([].sort);

/* Opera 12- */
var isOpera = Boolean(window.opera);	

四、Safari浏览器

属性选择器Hack

/* Safari 2/3 */
html[xmlns*=""] body:last-child .selector {
 样式代码放这里		
} 
html[xmlns*=""]:root .selector  {
 样式代码放这里		
}

/* Safari 2/3.1, Opera 9.25 */
*|html[xmlns*=""] .selector {
 样式代码放这里		
}

/* Safari 5- and Chrome 24- */
::made-up-pseudo-element, .selector {
 样式代码放这里		
}	

媒体查询Hack

/* Safari */
var isSafari = /a/.__proto__=='//';	

五、IE浏览器

选择器Hack

/* IE 6 and below */
* html .selector  {
 样式代码放这里		
} 
.suckyie6.selector {
 样式代码放这里		
} /* .suckyie6 can be any unused class */

/* IE 7 and below */
.selector, {
 样式代码放这里		
}

/* IE 7 */
*:first-child+html .selector {
  样式代码放这里	
} 
.selector, x:-IE7 {
 样式代码放这里		
} 
*+html .selector {
 样式代码放这里		
} 

/* Everything but IE 6 */
html > body .selector {
 样式代码放这里		
}

/* Everything but IE 6/7 */
html > /**/ body .selector {
  样式代码放这里	
}
head ~ /* */ body .selector {
 样式代码放这里		
}

/* Everything but IE 6/7/8 */
:root *> .selector {
 样式代码放这里		
} 
body:last-child .selector {
 样式代码放这里		
} 
body:nth-of-type(1) .selector {
 样式代码放这里		
} 
body:first-of-type .selector {
 样式代码放这里		
}	

属性/属性值 Hack

/* IE 6 */
.selector { _color: blue; } 
.selector { -color: blue; }

/* IE 6/7 - any combination of these characters: 
 ! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : <  > | */
.selector { !color: blue; } 
.selector { $color: blue; } 
.selector { &color: blue; } 
.selector { *color: blue; } 
/* ... */

/* IE 6/7 - acts as an !important */
.selector { color: blue !ie; } 
/* string after ! can be anything */

/* IE 8/9 */
.selector { color: blue/; } 
/* must go at the END of all rules */

/* IE 9/10 */
.selector:nth-of-type(1n) { color: blue\9; }

/* IE 6/7/8/9/10 */
.selector { color: blue\9; } 
.selector { color/*\**/: blue\9; }

 /* Everything but IE 6 */
.selector { color/**/: blue; }

媒体查询Hack

/* IE 6/7 */
@media screen\9 {
 样式代码放这里		
}

/* IE 6/7/8 */
@media screen\,screen\9 {
 样式代码放这里		
}

/* IE 8 */
@media screen {
 样式代码放这里		
}

/* IE 8/9/10 & Opera */
@media screen {
 样式代码放这里		
}

/* IE 9/10, Firefox 3.5+, Opera */
@media screen and (min-resolution: +72dpi) {
 样式代码放这里		
}

/* IE 9/10 */
@media screen and (min-width:0) {
 样式代码放这里		
}

/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 样式代码放这里		
}

/* Everything but IE 6/7/8 */
@media screen and (min-width: 400px) {
 样式代码放这里		
}

JavaScript Hack

/* IE <= 8 */
var isIE = '\v'=='v';	
/* IE 6 */
(checkIE = document.createElement("b")).innerHTML = "<!--[if IE 6]><i></i><![endif]-->"; 
var isIE = checkIE.getElementsByTagName("i").length == 1;	
/* IE 7 */
(checkIE = document.createElement("b")).innerHTML = "<!--[if IE 7]><i></i><![endif]-->"; 
var isIE = checkIE.getElementsByTagName("i").length == 1;
navigator.appVersion.indexOf("MSIE 7.")!=-1	
/* IE 8 */
(checkIE = document.createElement("b")).innerHTML = "<!--[if IE 8]><i></i><![endif]-->"; 
var isIE = checkIE.getElementsByTagName("i").length == 1;	
/* IE 9 */
(checkIE = document.createElement("b")).innerHTML = "<!--[if IE 9]><i></i><![endif]-->"; 
var isIE = checkIE.getElementsByTagName("i").length == 1;	
/* IE 10 */
var isIE = eval("/*@cc_on!@*/false") && document.documentMode === 10;	

/* IE 10 */
var isIE = document.body.style.msTouchAction != undefined;

上面列出各个浏览器下hack的写法,当然在实际运用之中并不建议使用hack。如果你的页面需要hack来处理时,请先检查你的css或者js,如果实在无法达到要求,在考虑使用hack来处理。

特别声明:以上展示的hack代码均来自于:http://browserhacks.com/

如需转载,请遵守W3cplus版权声明,烦请注明出处:http://www.w3cplus.com/css/browser-hacks.html

60 BEST SINGLE PAGE WEBSITE TEMPLATES

轉自 Bashooka

 

 

OMNI

one-page-templates-60

Omni is a high quality, flat and full responsive HTML theme for creative businesses or photographers. It comes with 4 header options, a fullscreen portfolio, a parallax header or a video header and a slider revolution header!

Download Omni →

47

one-page-templates-61

Download 47 →

ELEMENT

one-page-templates-62

Element is a multifunctional one page HTML template, suitable for company portfolio, showing your web or mobile app or simply a short brief. It’s responsive and looks great on phones and tablets and most of all it’s highly customizable.

Download Element →

WILDER

one-page-templates-63

Wilder is the ultimate and professional way for you to present your portfolio or the very best starting point for your own corporate website. If you are searching something different and out of the line, please check out the Wilder – Flat One Page Responsive Website Template!

Download Wilder →

CASUAL

one-page-templates-64

Responsive Retina Ready HTML Template is suitable for creative portfolio, fashion, studio agencies. Can be use as one page or seperate pages versions or combine both the files as per you need.

Download casual →

INKED – RESPONSIVE TATTOO PORTFOLIO

one-page-templates-65

Inked Tattoo Portfolio is a One Page Responsive Template with a clean & unique design. The theme is packed with some great features to display any kind of details for your website.

Download Inked – Responsive Tattoo Portfolio →

RENOVA

one-page-templates-66

Renova is a highly unique and reusable, one-page creative portfolio theme with fully responsive layout built using Bootstrap framework version 2.3.2. Renova is a one page theme with flat design trend but a advanced blend of uniqueness.

Download →

JARVIS

one-page-templates-67

Jarvis is the perfect one page parallax template for corporate, agency, nonprofit, freelancer or general business.

Download →

HALFCREATIVE

one-page-templates-68

It’s a beautiful clean, minimal and elegant HTML5 / CSS3 One page Template. This template has been designed for an Digital Agency , small business, landing page or would be perfect for a portfolio.

Download →

CREATIVE

Creative Single Page Portfolio

Creative Single Page Portfolio is the definitive template for showcasing visual portfolios, easily customizable with 7 (6+1) modules and a powerful fullscreen gallery to showcase big size works directly on homepage.

Download Creative Single Page Portfolio →

TEMPTATION

Temptation - a Single Page Template

Temptation is a single page portfolio template with a minimal and clean design with strong typography, well suited for personal and proffesional use.If you’re in need for a template with emphasis on content with strong and bold typography, this is the template for you.

Download Temptation →

ZIPFOLIO

Zipfolio - Single Page Portfolio Template

This one page portfolio template was built for graphic designers, photographers, illustrators, artists and other creative freelance pros who want a simple, elegant and effective way to showcase projects and promote services.

Download Zipfolio →

BOUTIQUE

Boutique -  Single Page Flash like Business Websit

Boutique is an elegant and simple theme for your showcase & business website. Its easy to setup and customize. Its XHTML 1 .0 Strict and CSS valid. jQuery Powered in every aspect and compatible with every major browser.

Download Boutique – Single Page Flash like Business Websit →

GALERIA

Galeria - Single Page Portfolio Template

Galeria includes two color variations (Dark and Light) and two portfolio options (Gallery and Slider). The slider used features 9 incredible transition effects.

Download Galeria →

STRATUM

Stratum – HTML single page Template

OStratum is powerful one page template with clean look. If you are looking clean, clear professional looking template then Stratum will match with your needs.Clean, Simple, One Page Template, with powerful features.

Download Stratum – HTML single page Template →

MOVEIT

Moveit - single page creative portfolio

Moveit is a one page fantastic portfolio, featuring customized javascript, work in all major browser, but you wont see the transition animation in ie6 and 7.

Download Moveit – single page creative portfolio →

IMAGERY

Imagery - Single Page Responsive Portfolio

Imagery perfectly designed and Coded (HTML 5 & CSS 3) for creative agency and creative folks, it comes up with six different pages, two different UI for about us section and two different style skins.

Download Imagery →

WEDDING

Wedding Single Page Website Template

Laura And Smith website template built with pure custom CSS frame work, which suits perfectly for Wedding, Albums, Invitation and Personal Portfolio websites.

Download Wedding →

SPYRAL

Spyral - Responsive Single Page Template

Spyral is a clean style template and it has 3 background Style (Boxed with background, Plain White, Plain Black).

Download Spyral →

BLURI SINGLE PAGE HTML TEMPLATE

BLURI Single Page HTML Template

BLURI is a definitive single page template with a clean and vibrant design which is best for professional, corporate portfolios and business websites.

Download BLURI →

VIEW

View - HTML5 Responsive Single Page Template

View is a Responsive and an HTML5 based template. This is minimalist design and is best for personal and portfolio site. A lot of features like gallery, video, flex slider, and a many more.

Download View →

FOLIO PRO

Folio Pro - A Strking Single Page Portfolio

FolioPro is an attractive, clean and easy-to-customize portfolio template. Your work is presented in a beautiful JQuery gallery with smoothly animated filters and colorbox popups for images and video. Microformat support is also included, to keep your Google ranking high and ensure clients can find you easily.

Download Folio Pro →

TERMINAL VELOCITY

Terminal Velocity - Minimalistic Single Page Folio

Terminal Velocity is a clean, simple and minimalistic single page portfolio theme. It uses the rock solid jQuery framework for its interactive tasks. It features smooth scroller, showcase slider equipped with prettyPhoto plugin and a beautiful ajax powered working contact form.

Download Terminal Velocity →

HERO

Hero - A Responsive Single Page Template

A responsive, clean and minimal style single page template for personal and business type. It has a fixed menu on the very top of the document for easy to navigate.

Download Hero →

GRIDFOLIO

GridFolio - Grid Based Single Page Portfolio

!GridFolio is a clean, minimal, single page grid-based site. Perfect for a porfolio site but can be used for any number of purposes.The site can be set up thousands of different ways and you can have multiple portfolios, galleries or whatever you can dream up!

Download GridFolio →

CLEAN PROFESSIONAL VCARD OR SINGLE PAGE SITE

Clean Professional VCard or Single Page Site

This template can be used as an online business card, or a simple one page resume or single page portfolio. Use it to showcase your art, photography, illustration, or any other work. This template uses a JQuery slider to scroll to the next sections while staying on the same page.

Download Clean Professional VCard →

MOTIVATION

Motivation - Responsive Single Page HTML Template

Motivation is a single page portfolio template with a minimal design with strong typography, well suited for personal and professional use.

Download Motivation →

FUNDER

FUNDER - Bootstrap Crowdfunding Site (Single Page)

FUNDER is a One Page Crowdfunding HTML Template using a powerful Bootsrap framework.Funder offers different versions including a 2 to 4 columns, a google map a gallery and a project page.The Template has been conceived for an optimal usability combining a wonderful user interface with an excellent user experience.

Download FUNDER →

DETROIT

Detroit - Bootstrap Single Page Website Template

Detroit – Jquery Single page website template built with “Bootstrap” frame work, which suits perfectly for Personal and Portfolio websites.

Download Detroit →

VICEROY

Viceroy - Jquery Single page website Template

Viceroy is a jQuery single page website template, which uses latest CSS3 & HTML5 techniques and suits perfectly for Restaurants, Cafe, Hotels, Celebrities and Portfolio websites. It is cross browser compatible, uses Google fonts. It comes with ready to use Ajax based contact form, you just need to add your email ID to receive emails.

Download Viceroy →

CAMARA

Camara - Responsive Parallax Single Page Template

Camara is a responsive parallax HTML Portfolio single template perfect to promote your work .

Download Camara →

R.GEN

R.Gen - Single Page Site Template

“R.Gen – Single Page Site Template” is a best for presenting content & portfolio. This package include UI sprite PSDs for easy to edit theme.

Download R.Gen →

ERICA

Erica - Jquery Single Page Website Template

Erica – jQuery Single page website template built with jQuery accordion frame work, which suits perfectly for Personal and Portfolio websites.

Download Erica →

CASTORE

Castore - Multipurpose Single Page HTML Theme

Castore is a single page HTML /CSS/Javascript theme, specially designed for professional and effective business/personal sites.

Download Castore →

SMARTIFY

Smartify - Single Page HTML5 Portfolio Template

Smartify is Single page HTML5 Portfolio template perfect for web designers and developers who want to have clean and minimalistic design to represent their work.

Download Smartify →

SPARK

Spark - A Responsive One-Page HTML5 Website

Spark is a fully responsive one-page HTML5 website template featuring exceptional page-load performance.

Download Spark →

SCROLLCASE: SINGLE PAGE APP SHOWCASE, 2D SCROLLING

Scrollcase: Single Page App Showcase, 2D Scrolling

Scrollcase is an HTML5 ‘one-page’ template which scrolls in 2-dimensions between the sections (jQuery multi-directional scrollTo transitions).It has a Flexslider v2 carousel built into the homepage, uses touchTouch for image lightbox enlargements – both are swipe gesture enabled.

Download Scrollcase →

RED PAGE

Red Page: Creative Responsive One Page Template

Stylish and modern design makes this theme memorable for potential customers. It was made regarding the latest web trends.The theme is highly responsive.

Download Red Page →

JUMPER

Jumper - one page template

Jumper is a single page sliding template (with a bonus blog page), best suited for those creatives who want to show their work in a simple and interesting way.

Download Jumper →

FOLIERA

Foliera - One Page Portfolio

Foliera – One Page Portfolio is a simple, clean professional single page portfolio template. Designed specially for showcasing your works in a very elegant design, it has 5 modules and 5 colour scheme.

Download Foliera →

PRIMENTO

Primento One Page Portfolio

Primento is a One Page HTML Portfolio which includes a HTML Resume. The theme has a unique retro and creative look and feel to it which is easy to edit and maintain.

Download Primento →

SHAPESHIFTER

ShapeShifter - One Page, Infinite Possibilities

This theme is perfect for anyone looking to launch a site right away. It’s perfect for businesses, creatives, and individuals who want to quickly publish their portfolio or image galleries, individuals who want a streamlined site without too many bells or whistles, and anyone else who’s serious about having a simple, well designed website.

Download ShapeShifter →

MAGIE

Magie - One Page Website Template

Magie is a one page website template suitable for creative minds that want to showcase their portfolio and have a blog at the same time. Magie is powered by Ajax, this means that every requested page loads into the main page allowing Magie to stay truly one paged.

Download Magie →

ILONE

Ilone - One Page Portfolio Template

Ilone is a one page website template suitable for creative minds that want to showcase their portfolio. ilone is powered by Ajax, this means that every requested page loads into the main page allowing ilone to stay truly one paged.

Download Ilone →

SINGLET

Singlet | One Page Portfolio Template

SINGLET is the Clean & Responsive One Page Portfolio Template for Individual Professionals & Agencies.

Download Singlet →

LAVENDER

Lavender - One Page Wedding Template

Lavender is one page site template which is designed for weddings. If you drop some other content it can be suitable for any other purpose.

Download Lavender →

VENTO

Vento - one page responsive html

Vento is a beautiful, modern, stylish and straight to the point single page portfolio html for creatives professionals.

Download Vento →

DRY

Dry - One Page Responsive Template

DRY is a simple and clean one page portfolio template, perfect for any designer, photographer, illustrator, creative person or agency. It focuses on displaying a high quality portfolio, large typo presented in a really elegant way.

Download Dry →

SELECAO

Selecao - bootstrap parallax one page template

Selecao is a one page site template built with responsive twitter bootstrap. This template suitable for web design company or agency to represent services and portfolio.

Download Selecao →

UNORIUM

Unorium - One Page Parallax HTML Theme

Unorium is a One Page Parallax Theme. It is modern and clean, very easy to edit. It’s prepared to use with jquery parallax effect. There are flat and simple graphics.

Download Unorium →

SMART

Smart  HTML/CSS One Page Template

Smart is a clean, modern and minimalist one page template.Suitable for those who want to show their work in a simple and interesting way. Ideal for a web and graphic designers, personal and professional use, photographers etc.

Download Smart →

SCROLLIN

Scrollin - One Page Parallax Responsive HTML

Scrollin comes with a parallax banner area, many styles, columns etc. for creation of your about and services sections, filterable portfolio using Isotope, team profiles section, testimonials, client logos, blog (just HTML/CSS) and contact section complete with a Google Map and PHP contact form.

Download Scrollin →

ESATTO

Esatto - One Page Responsive Bootstrap Template

Esatto is a One Page responsive site template built with Bootstrap.

Download Esatto →

SHAPESHIFTER 2

ShapeShifter 2 : Responsive, One Page, HTML Pack

ShapeShifter 2 is responsive (try resizing your browser)… that means that it’ll flex to fit massive screens, or itty bitty iPhone screens (and everything in between).

Download ShapeShifter 2 →

FOCUSED

focused - One Page HTML5 Template

focused is a single page html5 template for creative individuals, photographers, freelancers, creative agencies and all sort of creative people. It is a fully responsive template hence it works on all devices from desktop to tablets to smartphones handsomely.

Download focused →

VENDIBLE

Vendible - Site/Domain For Sale XHTML/CSS

Vendible – Domain For Sale is a clean single page template, designed to advertise a site or domain for sale, complete with a tweet box and working PHP /AJAX contact form.

Download Vendible →

SMARTLUX

Smartlux HTML/CSS One Page Template

Smartlux is a clean, modern and minimalist one page template.Suitable for those who want to show their work in a simple and interesting way. Ideal for a web and graphic designers, personal and professional use, photographers etc.Hope you like it, if you have any problem please feel free to send me a PM.Thank you for your time and don’t forget to rate

Download Smartlux →

INSPIRA

Inspira HTML5 Responsive One Page Template

Inspira is having 5 color variants including an ultra-minimal monochrome variant. The template is with nice animations identical to flash based websites, but developed by precisely hand coded HTML5.

Download Inspira →

WEEDAY

WeeDay One Page with Timeline Wedding Template

Awesomely elegant and stylish HTML template with timeline. It’s clean, sharp, beautiful and elegant – everything you need for a nice wedding website.

Download WeeDay →

SENSE

Sense - One-Page Parallax HTML5 & CSS3 Template

Sense – is a smart, simple and fast one-page RESPONSIVE HTML5 & CSS3 template with parallax scrolling effect. This parallax movement creates 3D effect which will make your website more special.

Download Sense →

48 RESPONSIVE PRESTASHOP THEMES

轉自 bashooka

 

PrestaShop can become a good solution for a beginner to start-up his business. Nevertheless, experienced user will also find PrestaShop shopping cart very useful. At the same time Magento can be a very good solution for a big Internet store with a very wide range of items.

It’s the ease of use (for both the developer and the shop admin). Its modular system is completely great. If you need to change the layout of the store, you just drag modules around in the Back Office. There’s no cutting and pasting code in PHP files. The same for installing new modules. PrestaShop is mature enough at this point. There are hundreds of modules you can use to customize it to your liking (just do a google search or try their forum). PrestaShop is excellent if you need something that’s easy to use, easy to configure and flexible. It is an impressive new entry to the field, with a very attractive user interface and impressive product option/variant capabilities.

POPSHOP

Popshop

MAXSHOP

Maxshop

LEO

Leo

SHOPPIK

Shoppik

BUYSHOP

BuyShop

RESPONSIVE SUPERMARKET

Responsive

LEO TRACY

Leo

PMART

Pmart

LEO FLOWER

Leo

LEO GIFTS

Leo

POWERTOOL

PowerTool

PARFIJURE

Parfijure

LEO BIKE PRESTASHOP THEME

Leo

EGGTHEMES

Responsive

LEO BEAUTY

Leo

BEAUTYSHOP

BeautyShop

LEO TEA

Leo

LEO DECOR

Leo

LEO DRESS

Leo

ACTIWEAR

Actiwear

METROSHOP

MetroShop

LEO METRO

Leo

METRO RESPONSIVE

Metro

PERFECTUM

screen2

ET TOYS STORE

ET

CONCORDIA

Concordia

DILECTA

Dilecta

MADAME

Madame

MILLENIUM

Millenium

AUTUMN

Autumn

TRENDY

Trendy

CLEVE

Cleve

LEISURE

Leisure

CARANO

Carano

BALIM

Balim

FORTIUM

Fortium

DOTTED

Dotted

T-SHIRTS

T-shirts

SHOPCART

Shopcart

SHINYSHOP

ShinyShop

WAREHOUSE

Warehouse

SHOPPING

Shopping

MULTISHOP

Multishop

ARUNDO

Arundo

EGGTHEMES

EggThemes

BONFIRE

Bonfire

ALYSUM

Alysum

ULTIMATESHOP

Ultimateshop