CSS | 酷壳 - CoolShell

Chrome开发者工具的小技巧

2017年01月19日陈皓评论 63 条评论 97,282 人阅读

Chrome的开发者工具是个很强大的东西，相信程序员们都不会陌生，不过有些小功能可能并不为大众所知，所以，写下这篇文章罗列一下可能你所不知道的功能，有的功能可能会比较实用，有的则不一定，也欢迎大家补充交流。

话不多话，我们开始。

代码格式化

有很多css/js的代码都会被 minify 掉，你可以点击代码窗口左下角的那个 { } 标签，chrome会帮你给格式化掉。

…

阅读全文 Read More

( 89 人打了分，平均分： 4.42 )

浏览器的渲染原理简介

2013年05月22日陈皓评论 155 条评论 194,565 人阅读

看到这个标题大家一定会想到这篇神文《 How Browsers Work 》，这篇文章把浏览器的很多细节讲得很细，而且也被翻译成了中文。为什么我还想写一篇呢？因为两个原因，

1）这篇文章太长了，阅读成本太大，不能一口气读完。

2）花了大力气读了这篇文章后可以了解很多，但似乎对工作没什么帮助。

所以，我准备写下这篇文章来解决上述两个问题。希望你能在上班途中，或是坐马桶时就能读完，并能从中学会一些能用在工作上的东西。

浏览器工作大流程

废话少说，先来看个图：

从上面这个图中，我们可以看到那么几个事：

…

阅读全文 Read More

( 70 人打了分，平均分： 4.39 )

神奇的CSS形状

2012年03月24日 Neo 评论 21 条评论 28,188 人阅读

【感谢 Neo 投递本文 – 微博帐号： @_锟_ 】

在StackOverflow上有这么一个问题，有位同学在 http://css-tricks.com/examples/ShapesOfCSS/ 找到一些使用CSS做的形状，其中一位同学对下面的这个形状充满了疑问。

形状是：

代码是：

#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

这位同学就提问啦，为啥这么这么几句就能画出一个三角形呢？
于是呢，有高人出现，这个高人图文并茂的解释了这个三角的成因

…

阅读全文 Read More

( 24 人打了分，平均分： 3.33 )

前言： 布局是WEB开发一个重要的课题，进入XHTML/CSS后，使用TABLE布局的方式逐渐淡出，CSS布局以众多优点成为主流，本文将介绍40个基于CSS的web布局的资源和教程。文章的出处在 http://www.noupe.com/css/css-layouts-40-tutorials-tips-demos-and-best-practices.html 。文中的不少的例子在一本经典的CSS书籍《CCS: The Missing Manual, 2nd Edition》中都可以找到，据我所知，第二版在中国没有翻译出版。你可以从这里下载英文版（不过需要注册个用户名）

正文
基于CSS的布局 能提供更灵活布局方式和更强的用户视觉体验。一些重要技巧和关键点可以帮助初学者理解CSS布局的基础和本质。这也是本文成文的原因 ——找到那些完美的布局， 完全灵活的，等高栏 和工作完美的布局。
因此下面这个列表就是我们整理了网络上关于基于CSS布局的一些技巧，教程和最佳实践的列表。
当然你也可能对下面这些和CSS相关的主题有兴趣：

The 7 CSS Hacks that we should use
Using CSS to Do Anything: 50+ Creative Examples and Tutorials
Using CSS to Fix Anything: 20+ Common Bugs and Fixes

…

阅读全文 Read More

( 18 人打了分，平均分： 3.83 )

Web开发中需要了解的东西

2011年12月07日陈皓评论 150 条评论 176,894 人阅读

在StackExchange上有人问了这样一个问题： What should every programmer know about web development? （关于Web开发，什么是所有程序员需要知道的？）里面给出的答案非常不错，所以，我翻译转载过来。顺便说一下，StackExchange真是非常好，大家可以对同一个答案做贡献和修订，看看这个问题的修订过程你就知道了——专业的问答网站应该怎么去做。这就是我在这篇文章中也说过真正的用户体验是什么样的。

好了，下面是正文（我对原文做了一些批注，也许不对或有误导，请大家指正）

下面的这些东西可能对于大多数人并不陌生，但是可能会有些东西你以前并没有看过，或是没有完全搞懂，甚至都没有听说过。（陈皓注：我相信当你看完这个列表后，你会觉得对于我国的Web开发有点弱了，还是那句话，表面上的东西永远是肤浅的）

接口和用户体验

小心浏览器的实现标准上的不一致，确信让你的网站能够适当地跨浏览器。至少，你的网站需要测试一下下面的浏览器：

最新的 Gecko 引擎 ( Firefox )，
一个 Webkit 引擎 ( Safari , Chrome , 或是其它的移动设备上的浏览器)
IE 浏览器 (测试IE的兼容性你可以使用微软IE的 Application Compatibility VPC Images )
Opera 浏览器。

最后，你可以使用一下这个工具来看看你的网页在不同的浏览器下是怎么被显示出来的（陈皓注：这个工具就是以前本站介绍过的在不同浏览器和平台上检查你的网站的兼容性）

多考虑一下人们是怎么来访问你的网站而不是那些主流的浏览器：手机，读屏软件和搜索引擎，例如：一些Accessibility的东西： WAI 和 Section508 , 移动设备开发： MobiForge .

部署Staging：怎么部署网站的更新而不会影响用户的访问。 Ed Lucas的答案可以让你了解一些（陈皓注：Ed说了一些如版本控制，自动化build，备份，回滚等机制）。

千万不要直接给用户显示不友好的错误信息。

…

阅读全文 Read More

( 52 人打了分，平均分： 4.29 )

CSS图形

2011年08月15日陈皓评论 48 条评论 32,428 人阅读

下面的示例展示了使用纯CSS制作的各种图形，你可以自由地修改文中的CSS代码。这个收集的原文在这里。

经测试，IE9, Chrome, FF, Safari都可以正常显示。

正方形

长方形

…

阅读全文 Read More

( 13 人打了分，平均分： 3.77 )

一些有意思的贴子和工具

2011年03月04日陈皓评论 24 条评论 27,961 人阅读

又到了介绍各种杂项的时候了，正如以前的这三篇（这篇，这篇，和这篇）文章一样，本篇文章也给你介绍一些最近出现的一些有趣的东西。希望你能喜欢。

先说找工作吧，电影《该页无法显示》里的那个 facebook 主页上的 招聘网页 上是列了一堆问题，你可以去看看，你可以使用c/c++，Erlang，Haskell，Java，Perl，Python，PHP，Ruby来解题，不过只接受Unix/Linux下的版本，不接受Windows的版本。无独有偶， DropBox 的 招聘网页 上也是些算法题，大家可以过去看看，不过需要翻墙。（现在，对于美国互联网企业来说，如果你没有被 C2C ，说明你根本不存在，如果你没有被墙，说明你还不算成功）

接下来给大家介绍一些文档和教程吧，都是英文的。

Java和C#的完整比较 。这是一个相当完整的比较Java和C#语言的网页。很有意思，有助于你了解Java和C#的各种特性和不同。

SQL 性能调优 。这个文档覆盖了 IBM DB2 , MySQL , Oracle , PostgreSQL 和 Microsoft SQL Server 。不过这个电子书还没有写完，你可以使用其 RSS , twitter 或 Facebook 来跟踪其进度。

Clever Algorithms 。这个电子书也是免费的。其主要面向一些AI和面向自然的算法，一共45个。其包括概率随机算法，迭代进化算法，物理算法，可能性算法，蚂蚁蜜蜂式算法，免疫算法，神经算法等。里面大量的高等数学公式对我来说我已经看不懂了。不过，我相信这个电子书非常适合搞理论研究的人，或是需要抄袭一篇论文以顺利毕业的人使用。

HTML5 Audio & Video 处理 。这是一组在线的幻灯片，请使用键盘光标键翻页。这是一组带着各种演示的幻灯片，对于你要学习HTML5的声音和视频相关的知识很有帮助。

C 语言的宏 。你想知道C语的宏有哪些有些意思的用法吗？这篇文档不会让你失望的。其由浅入深地向你介绍了宏的各种用法。

各种语言的排序算法 。你想知道各种语言其默认的排序算法用的是哪种排序算法吗？看看这篇文章吧。

物理模拟F#教程 。相信你一定玩过那种游戏，画一个任意形状的石头，其会从天上落下以砸下面的一个东西，这个教程用.NET的F#向大家说明了这种东西怎么去做。（演示程序）

…

阅读全文 Read More

( 19 人打了分，平均分： 4.16 )

Web开发人员速查卡

2011年02月16日陈皓评论 22 条评论 30,439 人阅读

无论你是多牛的程序员，你都无法记住所有的东西。而很多时候，查找某些知识又比较费事。所以，网上有很多Cheat Sheets，翻译成小抄也好，速查卡也好，总之就是帮你节省时间的。之前给大家介绍过 Web设计的速查卡、 25个jQuery的编程小抄，还有程序员小抄大全，今天转一篇开发人员的速查卡，源文在这里。下面的文章我就不翻译了。