TOMMYHU

css变量定义和使用
css函数和表达式使用
css的常用单位px，rem，vh，vw
css给js传值
css兼容iphonex
示例代码：
[codes=c#]
css兼容iphonex，例如下方给x的横条留个空隙
padding-bottom: calc(现有容器内间距 + constant(safe-area-inset-bottom));
padding-bottom: calc(现有容器内间距 + env(safe-area-inset-bottom));

body {
  --primary: #7F583F;
  --secondary: #F7EFD2;
}
a {
  color: var(--primary);
  text-decoration-color: var(--secondary);
}
.foo {
  --gap: 20;
  /* 无效：必须使用calc连接 */
  margin-top: var(--gap)px;
  /* 支持操作符：+, -, *, / *
  margin-top: calc(var(--gap) * 1px);
  /* 无效：变量值只能用作属性值，不能用作属性名 */
  --side: margin-top;
  /* 无效 */
  var(--side): 20px;
}

@media screen and (min-width: 768px) {
  body {
    --primary:  #F7EFD2;
    --secondary: #7F583F;
  }
}


/* 作用域：同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与 CSS 的"层叠"（cascade）规则是一致的。*/

蓝色

css给js传值
// 设置变量
document.body.style.setProperty('--primary', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--primary');
[/codes]

针对width和height的宽高css3自适应fill-available&&fit-content&&max-content&&min-content
fill-available表示撑满可用空间（包括高度，宽度）[此处包括padding和margin会尽可能的撑满，只对于行内块（inline-block）和块元素（block）起作用，webkit内核支持。]
fit-content表示宽度缩小到内容的宽度
max-content表示用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。
min-content表示用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。这个最小宽度值有最大什么意思，如果是图片的话最小宽度值就是图片所呈现的宽度，如果是汉字就是一个字的宽度，如果是英文就是单词的宽度。

animate.css – 是一个齐全的CSS3动画库，查看效果：http://www.dowebok.com/demo/2014/98/
简介

animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。

虽然借助 animate.css 能够很方便、快速的制作 CSS3 动画效果，但还是建议看看 animate.css 的代码，也许你能从中学到一些东西。

兼容

浏览器兼容：当然是只兼容支持 CSS3 animate 属性的浏览器，他们分别是：IE10+、Firefox、Chrome、Opera、Safari。

使用方法

1、引入文件
[codes=c#]

[/codes]

2、HTML 及使用
[codes=c#]

[/codes]
给元素加上 class 后，刷新页面，就能看到动画效果了。animated 类似于全局变量，它定义了动画的持续时间；bounce 是动画具体的动画效果的名称，你可以选择任意的效果。

如果动画是无限播放的，可以添加 class infinite。

你也可以通过 JavaScript 或 jQuery 给元素添加这些 class，比如：
[codes=c#]
$(function(){
    $('#dowebok').addClass('animated bounce');
});
[/codes]
有些动画效果最后会让元素不可见，比如淡出、向左滑动等等，可能你又需要将 class 删除，比如：
[codes=c#]
$(function(){
    $('#dowebok').addClass('animated bounce');
    setTimeout(function(){
        $('#dowebok').removeClass('bounce');
    }, 1000);
});
[/codes]
animate.css 的默认设置也许有些时候并不是我们想要的，所以你可以重新设置，比如：
[codes=c#]
#dowebok {
    animate-duration: 2s;    //动画持续时间
    animate-delay: 1s;    //动画延迟时间
    animate-iteration-count: 2;    //动画执行次数
}
[/codes]
注意添加浏览器前缀。

hybridapp h5手机横竖屏样式js、css
当然这样一句少不了
[codes=c#]

[/codes]

css监视横竖屏样式
[codes=c#]
/*这是匹配横屏的状态，横屏时的css代码*/
@media all and (orientation : landscape) {
  body { }
  .someclass{}
}
/*这是匹配竖屏的状态，竖屏时的css代码*/
@media all and (orientation : portrait){
  body { }
  .someclass{}
}
[/codes]

js监视横竖屏样式
[codes=c#]
function orientationChange(){
  switch(orientation){
    case 0:
      alert('0, screen-width:'+screen.width+', screen-height:'+screen.height+',可视区宽:'+document.documentElement.clientWidth+',可视区高:'+document.documentElement.clientHeight);
      break;
    case 90:
      alert('90, screen-width:'+screen.width+', screen-height:'+screen.height+',可视区宽:'+document.documentElement.clientWidth+',可视区高:'+document.documentElement.clientHeight);
      break;
    case -90:
      alert('-90, screen-width:'+screen.width+', screen-height:'+screen.height+',可视区宽:'+document.documentElement.clientWidth+',可视区高:'+document.documentElement.clientHeight);
      break;
    case 180: //貌似看不到这种角度
      alert('180, screen-width:'+screen.width+', screen-height:'+screen.height+',可视区宽:'+document.documentElement.clientWidth+',可视区高:'+document.documentElement.clientHeight);
      break;  
  }  
}

document.addEventListener('DOMContentLoaded',function(){
  orientationChange();
  window.onorientationchange=orientationChange;
},false);
[/codes]

SASS是CSS3的一个扩展，增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。

SCSS即是SASS的新语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的CSS3样式也同样适合于SASS。

例如：
[codes=css]
---------------------------------
在SCSS中使用变量
---------------------------------
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}


转换成CSS如下：
/* CSS */
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}


-------------------------------------------
SCSS嵌套：
-------------------------------------------

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}



转换成CSS如下：
/* CSS */

table.hl {
  margin: 2em 0;
}

table.hl td.ln {
  text-align: right;
}


li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}
[/codes]
有兴趣的同学可以到官方网站去了解一下，http://http://sass-lang.com/ ，英文的。

[codes=c#]
前缀
-moz(例如 -moz-border-radius)用于Firefox
-webkit(例如：-webkit-border-radius)用于Safari和Chrome。
例1

#round {
    padding:10px; width:300px; height:50px;
    border: 5px solid #dedede;
    -moz-border-radius: 15px;      /* Gecko browsers */
    -webkit-border-radius: 15px;   /* Webkit browsers */
    border-radius:15px;            /* W3C syntax */
}
[/codes]
效果：

[codes=c#]
CSS圆角

例2：无边框
  
#round {
    padding:10px; width:300px; height:50px;
    background:#FC9;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius:15px;
}
[/codes]
效果：

[codes=c#]
CSS圆角

书写顺序
/* Gecko browsers */
-moz-border-radius: 5px;
/* Webkit browsers */
-webkit-border-radius: 5px;
/* W3C syntax - likely to be standard so use for future proofing */
border-radius:10px;
其它
支持上、右、下、左

border-radius:5px 15px 20px 25px;
支持拆分书写

/* Gecko browsers */
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 20px;

/* Webkit browsers */
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 20px;

/* W3C syntax */
border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius:  20px;
支持性
浏览器  支持性
Firefox(2、3+)  √
Google Chrome(1.0.154+…)  √
Google Chrome(2.0.156+…)  √
Safari(3.2.1+ windows)  √
Internet Explorer(IE7, IE8)  ×
Opera 9.6  ×
[/codes]

     使用EditPlus想visual studio那样可以格式化代码，是的Editplus中js、css、html代码自动格式化
一般用editplus写一些小的测试代码或者来研究学习别人的代码，但经常会遇到这些问题：下载过来的HTML/CSS代码混乱，JS代码被压缩，或者是我们想把我们的代码做一下压缩混淆以供发布时使用。当然，对于代码的格式化和代码压缩等，我们都可以使用专有的工具，或者使用一些在线的工作来做，既然EditPlus可以扩展插件，那我们何不利用这一功能来把这些工具集成到EP中呢？

     其实很早我都有这些想法，一直没有深究其做法，EP的用户工具组，我一般也是挂些帮助手册之类的供开发时参考。今天在BlueIdea看到有人发了一篇名为“让Editplus自动格式化css和js”的文章，看完后觉得写的很好，我也突然来了灵感，为什么不把前端开发常用工具都集成进去呢？

      说做就做，我在网上找了一些相关的工具代码，按照作者的方式开始改造（作者是使用“本地cScript调用JS+EP的文本过滤器”的方式来实现的）。


     下面来说下集成的方法（以下以EditPlus3中文版本为例）：

      1、下载工具包：edtools.rar ,解压后放到磁盘的一个目录，如D:/edTools。

      2、打开ED，打开“工具”-“用户工具组”，在弹出的对象框中，在“组和工具项目”下拉框中选择一个工具组，点击“组名称”，为该组工具设定一个名称，如“前端开发工具”，如下图所示：

    
      3、下面开始加入工具，这里主要以JSFormat为例讲解，其它类似。
点击“添加”--“应用程序”，在新建的项中，菜单文本写上名称，如"jsFormat"，在命令里面输入：
[codes=c#]
cscript /nologo "D:/edTools/jsFormatter.js"  
[/codes]
后面引号中的内容要修改你磁盘上对应的文件的路径。
在下面的几个选项中，选择“运行为文本过滤”。如下图所示：

4、其它几个的安装方式与jsFormat的安装类似，这里不再重复。点击ED ，工具你会发现：jsFormat   Ctrl+1,打开一个js点击后你会发现奥秘。

为地震灾区默哀，网站灰色css代码，兼容各浏览器
[codes=c#]
html{
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);
  }
[/codes]

HTML5是越来越牛逼轰轰了，到底有啥不一样，下面有个html5的最新手册下载，看看就明了啦！


很棒的HTML5手册+CSS3手册下载，更新下前端知识！，网上找了很久，都TM的浮云，泡沫！还是博客园来的实在，支持！
很多人说现在IE浏览器不支持.研究没用.但我觉的.就算IE9出来了,IE6,7,8还是不支持.. 所以现在和以后效果是一样的.都是要搞些兼容性
以下是参考手册下载地址 : http://files.cnblogs.com/Capricornus/css3.0html5.rar
各大浏览器 CSS3 和 HTML5 兼容速查表
http://news.csdn.net/a/20100401/217692.html
HTML5手册+CSS3手册下载，更新下前端知识！ HTML5手册下载 HTML5中文手册下载 CSS3手册下载 CSS3中文手册下载
深入了解 HTML 5资源
http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K701.aspx
另外还可以上W3CSHCOOL查看http://www.w3cschool.cn/html5_reference.html
，下面是截图
HTML5手册

CSS3手册

没有目标的人都只在帮有目标的人完成目标。