浏览器兼容性有效性信息查询 : 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. java基础知识(二)字符串处理

    字符串是程序开发中使用最为频繁,因此为了工作的高效和作为一名想进阶的程序员,了解并掌握字符串的处理显得尤为重要.java为我们提供了String.StringBuffer.StringBuilde三个 ...

  2. 2.3属性在 ASP.NET Web API 2 路由

    路由是 Web API 如何匹配 URI 的行动.Web API 2 支持一种新型的路由,称为属性路由.顾名思义,属性路由使用属性来定义路由.属性路由给你更多的控制 Uri 在您的 web API.例 ...

  3. ID属性值为小数

    获取带有.的id值 <h1 id="123.45">dom对象</h1> <script> $('#123\\.45').attr('id') ...

  4. PROJ4初探(转并整理格式)

    PROJ4初探(转并整理格式) Proj4是一个免费的GIS工具,软件还称不上. 它专注于地图投影的表达,以及转换.采用一种非常简单明了的投影表达--PROJ4,比其它的投影定义简单,但很明显.很容易 ...

  5. 关于oracle中日期使用

    spl> select * from emp         where dates          between         to_date('2007-06-12 10:00:00' ...

  6. Linux From Scratch - Version 7.7-systemd (中文)

    Linux From Scratch - Version 7.7-systemd: https://linux.cn/lfs/LFS-BOOK-7.7-systemd/index.html

  7. Java、JVM模型

    程序计数器:记录当前线程的执行位置(便于CPU切换线程的时候执行) 虚拟机栈:Java方法,方法从调用到执行完成对应一个栈帧从虚拟机栈入栈到出栈的过程. 本地方法区:Native方法(C++) 方法区 ...

  8. ReactiveCocoa学习

    ReactiveCocoa常见类 6.1RACSiganl:信号类,一般表示将来有数据传递,只要有数据改变,信号内部接收到数据,就会马上发出数据. 注意: 信号类(RACSiganl),只是表示当数据 ...

  9. 伪随机数(线性同余法)C语言

    /**Keil Lib*2015.6.12*Pass*by lort*/uint32 Srandx ; uint32 SrandK = 1103515245;//0x41C64E6D;uint32 S ...

  10. Jquery 实现点击tab切换页签

    1.我将这个封装城了插件代码如下,你可以独立到一个js文件,然后页面引用下这个js文件: (function ($) { $.fn.extend({ qmTabs: function () { var ...