浏览器兼容性有效性信息查询 : Can I Use?

http://caniuse.com/

自动为css添加浏览器厂商前缀

https://autoprefixer.github.io/

在线编辑HTML/CSS/JavaScript与即时预览的工作台

https://jsfiddle.net/

http://codepen.io/pens/

http://runjs.cn/

简易的DOM获取工具函数

function $$(selector,context) {
context = context || document;
var elements = context.querySelectorAll(selector);
//我们知道,Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组
  // 除了IE下的节点集合(因为ie下的dom对象是以com对象的形式实现的,js对象与com对象不能进行转换)
return Array.prototype.slice.call(elements);
}

通过js判断样式属性是否被支持

/* 检测单个属性 */
var root = document.documentElement;
if ('textShadow' in root.style) {
root.classList.add('textshadow');
} else {
root.classList.add('no-textshadow');
} /* 上例函数化 */
function testProperty(property) {
var root = document.documentElement;
if (property in root.style) {
root.classList.add(property.toLowerCase());
return true;
}
root.classList.add('no-' + property.toLowerCase());
return false;
}
/* 检测某个具体的属性值是否支持: */
function testValue(id, value, property) {
var dummy = document.createElement('p');
dummy.style[property] = value;
if (dummy.style[property]) {
root.classList.add(id);
return true;
}
root.classList.add('no-' + id);
return false;
}

demo1——css编辑技巧:

http://runjs.cn/code/hul3lwuq

/* 如果字体变化,这段代码改动的幅度会非常大 */
.button{
padding:6px 16px;
border:1px solid #446d88;
background:#58a linear-gradient(#77a0bb,#58a);
border-radius:4px;
box-shadow:0 1px 5px gray;
color:white;
text-shadow:0 -1px 1px #335166;
font-size:20px;
line-height:30px;
} /* 字体改大,其他地方也跟着变大,知识点在于em单位,但依然存在问题,就是颜色 */
.button-2{
padding:.3em .8em;
border:1px solid #446d88;
background:#58a linear-gradient(#77a0bb,#58a);
border-radius:.2em;
box-shadow:0 .05em .25em gray;
color:white;
text-shadow:0 -.05em .05em #335166;
font-size:225%;
line-height:1.5;
} /* 只需要覆盖背景颜色,就可以动态改变了 */
.button-3{
padding:.3em .8em;
border:1px solid #446d88;
background:#58a linear-gradient(hsla(0,0%,100%,.2),transparent);
border-radius:.2em;
box-shadow:0 .05em .25em gray;
color:white;
text-shadow:0 -.05em .05em #335166;
font-size:225%;
line-height:1.5;
} .ok {
background-color:#6b0;
} .warn{
background-color:#c00;
}

读书笔记 —— 《css秘密花园》的更多相关文章

  1. csapp读书笔记-并发编程

    这是基础,理解不能有偏差 如果线程/进程的逻辑控制流在时间上重叠,那么就是并发的.我们可以将并发看成是一种os内核用来运行多个应用程序的实例,但是并发不仅在内核,在应用程序中的角色也很重要. 在应用级 ...

  2. CSAPP 读书笔记 - 2.31练习题

    根据等式(2-14) 假如w = 4 数值范围在-8 ~ 7之间 2^w = 16 x = 5, y = 4的情况下面 x + y = 9 >=2 ^(w-1)  属于第一种情况 sum = x ...

  3. CSAPP读书笔记--第八章 异常控制流

    第八章 异常控制流 2017-11-14 概述 控制转移序列叫做控制流.目前为止,我们学过两种改变控制流的方式: 1)跳转和分支: 2)调用和返回. 但是上面的方法只能控制程序本身,发生以下系统状态的 ...

  4. CSAPP 并发编程读书笔记

    CSAPP 并发编程笔记 并发和并行 并发:Concurrency,只要时间上重叠就算并发,可以是单处理器交替处理 并行:Parallel,属于并发的一种特殊情况(真子集),多核/多 CPU 同时处理 ...

  5. 读书笔记汇总 - SQL必知必会(第4版)

    本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...

  6. 读书笔记--SQL必知必会18--视图

    读书笔记--SQL必知必会18--视图 18.1 视图 视图是虚拟的表,只包含使用时动态检索数据的查询. 也就是说作为视图,它不包含任何列和数据,包含的是一个查询. 18.1.1 为什么使用视图 重用 ...

  7. 《C#本质论》读书笔记(18)多线程处理

    .NET Framework 4.0 看(本质论第3版) .NET Framework 4.5 看(本质论第4版) .NET 4.0为多线程引入了两组新API:TPL(Task Parallel Li ...

  8. C#温故知新:《C#图解教程》读书笔记系列

    一.此书到底何方神圣? 本书是广受赞誉C#图解教程的最新版本.作者在本书中创造了一种全新的可视化叙述方式,以图文并茂的形式.朴实简洁的文字,并辅之以大量表格和代码示例,全面.直观地阐述了C#语言的各种 ...

  9. C#刨根究底:《你必须知道的.NET》读书笔记系列

    一.此书到底何方神圣? <你必须知道的.NET>来自于微软MVP—王涛(网名:AnyTao,博客园大牛之一,其博客地址为:http://anytao.cnblogs.com/)的最新技术心 ...

  10. Web高级征程:《大型网站技术架构》读书笔记系列

    一.此书到底何方神圣? <大型网站技术架构:核心原理与案例分析>通过梳理大型网站技术发展历程,剖析大型网站技术架构模式,深入讲述大型互联网架构设计的核心原理,并通过一组典型网站技术架构设计 ...

随机推荐

  1. 常见HTTP状态码列表

    HTTP状态码 当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求.当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码的信息头(server header)用以响应 ...

  2. 在浏览器上直接输入url 时,中文传参乱码问题

    这样的地址 xxx.asp?name=中国  ,通过 超链接打开这个链接 ,xxx.asp能够成才接收参数,但是如果将地址直接放到浏览器地址栏上,回车, xxx.asp就无法正确接收中文参数,一直显示 ...

  3. Ubuntu 16.04 安装 Apache, MySQL, PHP7

    1.安装之前先更新系统 1 sudo apt update 2.安装Apache2 1 sudo apt install apache2 3.安装PHP 1 sudo apt install php ...

  4. PHP - xhprof+Graphviz 安装配置

    简介:XHProf是Facebook放出的轻量级调试工具.和Xdebug相比,XHProf更加易用和可控,尤其是生成流程图和调试数据对比的功能很好很强大. 参考:http://us2.php.net/ ...

  5. C# 使用 StructLayoutAttribute 时 C# /C++ 内存空间分配与成员对齐问题

    1. 使用场景 公共语言运行时控制数据字段的类或结构在托管内存中的物理布局.但是,如果想要将类型传递到非托管代码,需要使用 StructLayout 属性. 2. 内存分配问题. 如果不显示的设置内存 ...

  6. 命令行环境下简单实用的工具——重定向&管道

    如果你对管道和重定向应用自如了,无需继续往下看.本文虽然以windows上cmd命令行环境演示,但同样适用于Unix/Linux等平台. 引言 关于管道和重定向,最初是在刘汝佳的<算法竞赛入门经 ...

  7. linux操作oracle

    1.su - oracle 2.sqlplus / as sysdba; 1.登录linux,以oracle用户登录(如果是root用户登录的,登录后用 su - oracle命令切换成oracle用 ...

  8. Spring4.0编程式定时任务配置

    看过很多定时调度的配置,大多使用XML配置,觉得比较麻烦,也比较老套.这里介绍一种基于spring4.0注解编程式配置定时任务,简单清晰,使用方便.. 至于引入spring相关jar这里不多说,直接切 ...

  9. 与你相遇好幸运,Settings

    IDE-Java-Setting && IDE-Nodejs-Setting  Download

  10. node+fis3搭建

    node安装: 到https://nodejs.org/en/download/releases下载编译好的包, 如:https://nodejs.org/download/release/v4.4. ...