引言
现在的 web 严重缺乏表现力。你只要瞧一眼“现代”的 web 应用，比如 GMail，就会明白了：
堆砌 的方式一点都不现代。然而可悲的是，这就是我们构建 web 应用的方式。在现有基础上我们不应该有更高的追求吗？
时髦的标记，行动起来！
HTML 为我们提供了一个完美的文档组织工具，然而 HTML 规范定义的元素却很有限。
假如 GMail 的标记不那么糟糕，而是像下面这样漂亮，那会怎样？
html
Feelin' this Web Components thing.
Heard of it?
...
继续阅读 »
越来越多的文章和讨论都是关于什么是 web 组件，什么是自定义元素，它们有什么好处以及如何使用它们，这些概念也逐渐进入开发人员的视野。如果你还不知道创建自定义元素的概念，请参考阅读详细介绍自定义元素。
尽管这些新概念还没有在开发中大量使用，我认为是时候讨论一下使用它们的最佳实践。本文将通过对比分析两种创建自定义元素方法的优缺点，最后得出创建自定义元素的最佳实践。
more
方法一：全新的自定义元素
第一种方法是，在 DOM 中注册一个全新的自定义元素。下面例子中，我注册并使用了一个全新的按钮元素，并将其命名为 new-button。
html
//JS file
document.registerElement('new-b继续阅读 »
当我们在进行 Web 开发时，很多时候都是在有意或无意地创建一些矩形，深究一下，到底有多少中方式来得到一个几何图形呢？本文将简单介绍几种生成圆形、三角形和多边形的方式，并分析每种方式的优缺点。
下面是可能使用到的方式：
border-radius
border
rotating shapes with transform
pseudo elements
box-shadow
wrapping text into shapes with shape-outside
clip-path on an element
SVG assets
canvas
more
border-radius
使用 border-radius 样式属性是继续阅读 »
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.继续阅读 »