CSS 样式规则的匹配算法实现
这篇讲的是移动端开发中的一个具体问题：如何在自定义框架里，让CSS选择器像在浏览器中一样准确地匹配到UI控件。作者从自己开发的iOS CSS布局框架CocoaUI出发，拆解了其中CSS样式规则匹配算法的实现。 文章把核心放在了数据结构和匹配逻辑上。它定义了一个包含选择器数组的样式对象，并为其实现match方法。有趣的是，实现时并没有按照我们阅读CSS从左到右的习惯，而是采用了从右到左的顺序进行匹配。 这种倒序匹配有一个高效的关键点：先判断“关键元素”（即最右边的选择器）是否与目标节点匹配。如果不匹配，则整个规则立即失效，省去了不必要的遍历。匹配成功后，再依次向左，让目标节点的祖先节点与剩余选择器进行比对。整个过程在遇到节点树顶端或所有选择器都匹配完成时终止，清晰高效。 作者在讲解算法的同时，也点明了CSS“级联”特性与树结构的天然关联，并提供了完整的实现代码仓库链接，让读者不仅能理解思路，也能看到工程实践。
CSS1-CSS3 <color>颜色知识知多少？
这篇文章带我们回顾了CSS颜色关键字从1.0到3.0的演变历程。作者从一个实际开发者的视角出发，指出早期CSS1标准仅支持16种基本颜色关键字，这受限于当时的显示设备条件；到了CSS2，才新增了orange、brown等少数颜色；而CSS3时代则引入了大量源自X11窗口系统的颜色名称，使得可选关键字激增至147个。 作者坦言，尽管他早在2010年就整理过这些扩展颜色名，但因其拼写复杂、不便于记忆，在中文开发者社区中传播效果并不理想。文章的核心价值在于，它并非简单罗列，而是按CSS版本层级对颜色关键字进行了清晰归类与可视化展示，帮助读者直观理解规范的历史扩展脉络。对于前端开发者而言，这份梳理清晰的列表可以作为快速查阅颜色关键字的实用参考。
html5 section和article,向左还是向右？
这篇讲的是HTML5中一对让不少前端开发者犯难的兄弟标签：section和article。作者没有从枯燥的定义出发，而是直指核心困惑——按照字面意思理解，“部分”和“文章”在实际布局中常常可以互相包含，界限非常模糊。 文章抓住了区分两者的关键：article强调内容的“独立性”和“完整性”，是可以被单独复制或引用的，比如一篇博客、一则用户评论；而section更侧重于对内容进行逻辑上的“分块”或区域划分，比如一篇文章中的不同章节。作者通过两个直观的代码示例来印证这一点：一个是在描述“苹果”的文章下，用article包裹每条彼此独立的用户评论；另一个是用section将同一篇文章拆分为“红富士”和“国光”两个介绍段落。 值得注意的是，文章提醒大家不要陷入“标签按内容块头大小来选”的误区，语义的本质在于内容本身的功能。最后，作者还总结了使用section时的几个实用禁忌，比如不要把它当样式容器、不要为无标题的内容区块使用它。这些基于语义和实践的细节梳理，能帮助开发者在编码时做出更清晰的选择。
轻松入门css3之border-image
这篇讲的是CSS3中一个常被误解的属性：border-image。作者指出，很多人按传统边框的思路去理解它，结果容易卡住。文章的核心是帮读者转换思维——别把“图片边框”当成“线框加图片”，它更像一个“九宫格”剪裁游戏。 文章从最基础也最关键的两步讲起：首先是横竖两刀把源图裁成九块，裁剪尺寸遵循上、右、下、左的规则；其次是理解裁剪后的动作——四个角保持原样，中间被挖空，剩下的边缘部分会根据round（平铺）、repeat（重复）或stretch（拉伸）的方式向四周“撑开”以形成边框。作者通过同一张图展示了三种模式的效果，让差异一目了然。 更实用的是，文中总结了四个最容易踩坑的注意事项：裁剪尺寸默认单位是px、显示方式参数只能写一到两个、必须显式设置border-width、以及边框宽度与原图尺寸独立。最后，文章给出了完整的属性语法，并解释了“边框图像超出边框的量”这个进阶参数的含义。 对于想掌握border-image的开发者，作者建议先放下固有认知，记住“九宫格”原理和那几条注意事项，动手试过基本效果后，再回头深入理解会更透彻。
解读CSS布局之-水平垂直居中
这篇文章从CSS布局的分类入手，系统梳理了水平垂直居中的多种实现路径。作者基于实际项目已无需兼容低版本IE的背景，重点介绍了 `line-height + text-align:center`、盒模型（padding/margin填充）、绝对定位（50%偏移 + transform/负margin）等核心方法，并附有可运行的Demo。 文章的关键在于对比了不同方案的适用场景：`line-height` 方案简单但仅限单行文本；盒模型填充方案性能好、不触发回流，是重要的布局思想，但通常需要预知尺寸；而绝对定位的 `transform` 方案则能实现对未知宽高元素的完美居中，是现代前端的常用技巧。作者通过代码片段与原理解释，清晰地呈现了每种技术的取舍点。 通篇行文从整体布局观出发，落脚于具体实现细节，为开发者在面对“居中”这个高频需求时，提供了清晰的选择图谱和可直接套用的代码参考。
再谈怎样更好的写css
这篇讲的是作者在独自负责一个项目全部前端工作后，基于一年的实践痛点，对“如何更好地编写和维护CSS”进行的再思考。与初谈的基础不同，这次更聚焦于项目中的实战心法。 作者从如何“庖丁解牛”地解构视觉稿出发，强调应将页面按区块模块化，并采用“基类+扩展类+实例类”的命名方式来组织代码，以增强复用性和可读性。文章重点讨论了选择器的使用原则，主张多用类选择器，慎用元素选择器以实现样式与结构的解耦，并解释了为何要控制CSS选择器嵌套层级——这与浏览器从右向左的解析机制直接相关。 此外，文章也谈到了CSS预处理工具（如Sass、Less）和后处理工具（如Autoprefixer）的价值，认为它们能显著提升编码效率和兼容性处理能力。最后，作者展望了CSS3带来的强大能力（如Flexbox、动画），指出CSS的边界正在不断拓宽，鼓励开发者积极尝试新工具与新特性，以更灵活地解决问题。整篇文章源于实战，其模块化和工具化的思路对追求代码可维护性的前端开发者颇具启发。
初谈怎样更好的去规划CSS
这篇讲的是一位前端开发者如何从零开始，逐步构建更合理、高效的CSS代码体系。作者从初学者常见的内联式、内嵌式写法说起，详细对比了它们与外联式CSS在实现结构表现分离上的差异，并自然引出了CSS优先级、选择器特殊性（包括类、ID、包含关系及伪类等）这些核心概念。 文章的核心在于分享一套实用的CSS规划思路：首先通过全局定义和继承来处理共性样式，节省大量重复劳动；其次构建可重用的CSS组件库（如重置、公共样式），提升开发效率；再者强调模块化组织和语义化命名，避免代码混乱。作者还提倡用“效果类”封装通用的视觉呈现（如阴影、遮罩），只需在使用时传入特定参数，这种思想颇具工程化色彩。 整篇文章以作者个人的实践与踩坑经验为主线，从基础概念平滑过渡到项目级的架构规划，对前端新人理解CSS组织逻辑、以及中级开发者优化代码结构，都提供了清晰且可操作的路径。
导航类“不定宽水平居中”的几种思路
这篇讲的是前端布局中一个常见却棘手的问题：如何让导航栏这类元素在容器宽度不固定时，依然能水平居中。作者从实际开发场景出发，系统梳理了五种主要思路。 文章首先展示了经典的“绝对定位+相对定位”方案，通过双重定位来抵消偏移，但也提醒了溢出内容可能被挤压的潜在风险。接着介绍了更简洁的Flexbox解法，一行`justify-content: center`便能解决问题，尽管需要考虑旧版浏览器的兼容性。此外，还提到了利用JavaScript动态计算总宽度、使用浮动配合相对定位（被称为“整体右移，逐项左移”的巧妙方式），以及将列表项设为`inline-block`并利用`text-align`实现居中等方法。 每种方案都附带了具体的CSS代码片段和核心原理说明，不仅告诉读者“怎么做”，也解释了“为什么能行”。比如，指出了`margin-left: -50%`在此场景下的局限性，以及`translateX`的优势。文末以作者自身的求知经历作结，让这些技术方案更添一份实践温度。对于前端开发者来说，这是一份思路清晰、可直接参考的解决方案集。
使用CSS3 will-change提高页面滚动、动画等渲染性能
这篇文章从一个实际案例出发，介绍了如何使用CSS3 `will-change`属性来解决页面渲染性能问题。 案例中，开发者使用`background-attachment: fixed`实现视差滚动时，发现页面帧率降至30 FPS，肉眼可见卡顿。文章分析了其根因在于该属性会导致浏览器进行实时计算重绘。 为解决此问题，作者分享了三个优化技巧：将`background-attachment: fixed`替换为`position: fixed`；使用`::before`伪元素承载背景图；以及关键一步——添加`will-change: transform`。文章重点解释了`will-change`的工作原理：它允许开发者提前告知浏览器元素即将发生的变化类型，从而让浏览器可以提前创建独立的渲染层并启用GPU加速，优化绘制性能。这相比于过去常用`translateZ`等3D变换来“欺骗”浏览器以触发硬件加速的hack方法，是一个更标准、更语义化的解决方案。文章在最后指出，这一属性已在主流浏览器中得到支持。
移动端自适应方案
这篇文章探讨了移动端页面适配的核心问题：是否需要动态调整viewport的scale，以及如何选择最合适的自适应方案。作者从css开发者大会的分享出发，深入分析了手淘、天猫和手机携程三家大型网站的实际做法。 手淘方案通过获取设备dpr，动态生成viewport并利用rem进行布局；天猫则采用固定scale=1.0，结合flex布局以iPhone6宽度（375px）为基准；手机携程相对传统，使用固定的scale配合px与百分比布局。 作者针对常见的“1px问题”和“倍图适配”需求进行了实验验证。结论是，虽然动态调整scale能精确还原设计稿的1px边线并匹配不同dpr的图片，但实现成本较高。对于大多数项目，采用固定scale=1.0的“完美视口”，并配合rem管理尺寸、flex构建布局，是一种性价比很高、足以应对多数场景的实践方案。关键在于根据项目对还原度的具体要求，在开发成本与效果之间做出权衡。
ExtJS怎么刷新Grid表格前面的行序列号
这篇讲的是ExtJS开发中一个常见的小痛点：Grid表格使用了RowNumberer列来显示行序号，但当删除中间某行后，序列号会断档（比如变成1、2、4），无法自动重排为1、2、3。 问题的根源在于数据视图在数据变更后没有及时刷新。文章给出的解决方案非常直接且高效：在删除操作的事件处理函数中，在调用`store.remove()`移除数据后，紧跟着调用`grid.getView().refresh()`。这一行代码会强制Grid的视图进行重绘，从而让RowNumberer列基于当前的Store数据重新计算并显示连续的序列号。 这种处理只刷新视图，不重新加载数据，操作轻量且针对性强，是解决此类UI刷新问题的标准做法。对于使用ExtJS进行表格开发的工程师来说，这个技巧能快速修复因数据增删导致的序号显示不全问题。
js代码因逗号不规范导致IE不兼容的问题
作者分享了一个在前端开发中容易遇到的兼容性陷阱：代码在Chrome、Firefox中运行正常，但在IE中却抛出“Expected identified, string or number”的错误。经过排查，根因是JavaScript对象字面量的最后一个属性后多写了一个逗号（trailing comma），这是老版本IE无法容忍的语法不规范。 文章展示了如何用Eclipse的正则搜索（`,\\s*}`）来定位这类问题，但也指出了该方法对注释中的代码无效的局限。因此，作者更推荐使用Spket这类IDE插件，它能在编码阶段实时检查并标记出代码中的不规范之处，帮助开发者从源头避免问题。此外，文章还提醒，像`console`对象这类在IE中不存在的API也是常见的兼容性问题源，需要一并清理。 总的来说，作者从实际项目报错出发，不仅给出了具体的排错和代码规范化工具，也强调了对运行时环境差异保持警惕的重要性。处理已知的兼容性“坑”很重要，而借助工具养成规范的编码习惯，是更根本的预防之道。
了解CSS中的@ AT规则
这篇讲的是CSS中那些以@字符开头的“AT规则”，作者从日常编码中容易忽略的细节入手，系统梳理了它们的分类与用途。文章将AT规则分为“常规规则”和“嵌套规则”两类：前者如`@charset`、`@import`和`@namespace`，主要处理编码、文件导入与命名空间等基础设置；后者如`@media`、`@font-face`和`@keyframes`，则涉及响应式设计、自定义字体和动画等现代CSS的核心功能。 作者不仅列举了规则，还点出了实际应用中的注意事项。例如，指出`@charset`在现代Web项目中常被HTTP头或meta标签覆盖而显得多余；`@import`虽能实现CSS模块化，但因其阻塞渲染的特性，在生产环境并不推荐，更适合搭配构建工具在本地开发使用；对于尚处草案阶段的`@document`规则，也坦诚说明了当前浏览器支持有限的现状。 通过具体的代码示例和场景说明，文章将抽象规则落到了实处，比如用`@media`实现Retina屏适配、打印样式定制甚至IE浏览器Hack。对于想厘清这些符号背后逻辑、提升CSS工程化能力的开发者而言，这篇梳理提供了清晰的脉络。
html中frameset、frame、iframe框架用法小结
这篇文章深入梳理了HTML中frameset、frame和iframe三个框架标签的用法与关键差异。作者通过多个代码示例，展示了如何用frameset的cols和rows属性划分浏览器窗口，构建多栏页面布局，同时特别提醒frameset不能与body标签共存这一常见误区。对于frame标签，它通常作为frameset的子元素加载不同页面，文章还强调了添加noframes标签来处理浏览器兼容性，确保不支持框架的用户能看到提示信息。 文章对比指出，iframe与frameset不同，它可以在普通HTML文档中直接嵌入外部页面，更加灵活独立。一个值得注意的细节是，在使用iframe设置height为100%时，必须确保其父容器也定义了高度，否则样式可能失效——这是实际开发中容易踩坑的地方。示例中演示了如何结合frame和iframe构建左侧导航栏和右侧内容区的结构，虽然这种框架技术在现代Web中使用较少，但对于维护遗留系统或特定内嵌场景仍有实用意义。
用 HTML 标记的古怪代码注释
这篇讲的是作者如何从一个令他头疼的实际问题出发，为自己“定制”了一套代码注释方法。作者坦言自己一直无法掌握传统的注释方式，尤其是当代码嵌套层次变深后，注释无法清晰标记代码块的开始和结束，导致可读性反而下降。 为了解决这个痛点，他受HTML标签清晰界定范围的特性启发，创造了一种“古怪”的注释风格：在代码块的首尾添加类似``和``的注释。他声称在PHP、JavaScript、甚至Shell脚本中都使用这种方法。这不仅能让他在快速浏览文件时立刻定位到功能模块的边界，还意外获得了一个好处：在Sublime Text编辑器中，整个代码块可以像HTML标签一样被直接折叠起来，让视图更清爽。 作者知道这做法可能不符合某些严苛的编码规范，但他认为这种“小聪明”确实提升了自己定位和理解代码的效率。这篇文章的核心在于展现一个实用主义程序员如何为了实际工作流的顺畅，打破常规、对工具进行个性化改造的思路。
javascript定义对象的几种方法
这篇讲的是JavaScript中定义对象的几种经典方法。作者从最基础的对象扩充开始，逐步深入到工厂方式、构造函数、原型方式，最后介绍了试图融合两者优点的动态原型方式。 文章的核心价值在于对这些方式的细致对比。比如，它指出了“工厂方式”虽然方便，但每次创建对象都会生成新的函数实例，无法共享；而“构造函数方式”配合`new`关键字更规范，但方法不共享的问题依然存在。真正的突破点在于“原型方式”，它通过`prototype`让所有实例共享同一个方法，但作者也用代码清晰地演示了其中的陷阱：基本类型的属性变更不会同步，但引用类型（如数组）的变更却会在所有实例间反映出来。 最终，文章推荐了“动态原型方式”，它像一个精巧的折中方案：在构造函数内部通过一个标志变量，确保方法只添加一次到原型上，这样既保证了每个实例拥有独立的属性，又实现了方法的高效共享。这篇文章清晰地展示了每种方案的代码实现与适用场景，帮你理解为何需要从一种方式演进到另一种。
JavaScript初体验
这篇文章源于作者一次愉快的阅读体验。在读完《JavaScript语言精粹》后，他结合自己的使用经历，分享了几个对JavaScript印象最深的特点。 作者认为，JavaScript的灵活性是其核心魅力。比如“函数即变量”的特性，为异步和回调提供了天然支持；而JSON作为JS的“最伟大副产品”，极大地简化了数据序列化过程，对比传统语言的RPC工具堪称“酸爽”。他同时指出，抛开“原型继承”、“闭包”等看似高深的标签，JS其实是一门简单的语言，其Array、Object、函数参数等设计都透着直接和灵活。 文章也记录了作者的一些个人疑惑：他质疑JSONP在URL里写回调的方式是否足够优雅，思考Promise之外更佳的异步解决方案，并对Node.js在后端生态的统治地位表达了既批判又看好的复杂态度。在书评部分，他认为本书相比冗长的《权威指南》更为“接地气”。 通篇来看，这更像是一位有经验的开发者，在语言特性、生态现状和学习资源之间穿梭，给出的个人化思考笔记。对于想了解JS本质魅力或资深开发者心得的读者，其中的观察角度很有启发。
用JavaScript将数字转换为大写金额
这篇讲的是前端开发中一个常见但容易被忽视的需求：如何在JavaScript里将数字金额规范地转为“壹佰贰拾叁元整”这样的大写汉字格式。 作者直接分享了一个可以拿来即用的`digitUppercase`函数。它的核心思路很清晰：先用两个数组分别定义好“零”到“玖”和“角”、“分”等单位，然后通过循环和取余运算，逐位将数字映射到对应的大写汉字和货币单位上。函数巧妙地用正则表达式对转换后的字符串进行了多次清洗，处理了像“零元零角”这样可能出现的冗余情况，确保输出的格式既准确又符合中文财务书写习惯。 这个实现考虑得比较周全，能正确处理负数、小数（到分）以及像万亿这样的大额数字。对于需要实现发票打印、账单生成等场景的开发者来说，这段代码可以直接解决实际问题。
跨域访问和防盗链基本原理（二）
这篇文章深入拆解了Web前端跨域访问的核心原理，重点对比了两种主流解决方案：JSONP与CORS。作者从跨域访问的定义切入，清晰区分了浏览器Referer请求与脚本发起请求在安全性上的根本差异——后者可能被恶意利用截获数据，因此成为需要重点管控的技术问题。 文章详细剖析了JSONP的工作机制：它巧妙地利用了浏览器允许加载外部脚本的特性，通过客户端预先定义函数、服务端返回调用该函数的脚本代码来传递数据。作者也客观指出了JSONP的局限：只能发起GET请求、依赖客户端与服务端的特定配合，且数据必须是JSON格式。 随后，文章将视角转向更现代的CORS方案。这里作者解释了其核心是服务端通过设置HTTP响应头（如Access-Control-Allow-Origin）来显式授权跨域访问。浏览器在正式发送请求前，会通过OPTIONS预检请求与服务端协商权限，这一流程使得跨域访问的控制权更规范地回归到了服务端。文中配有的流程图，清晰地展示了这一交互过程。 最后，文章简要提及了服务器代理、修改域标识等其他方案，但明确指出JSONP与CORS构成了当前跨域访问实践的两大基石。整体上，文章从原理到实践，系统地梳理了这一前端关键技术点的演进与现状。
跨域访问和防盗链基本原理（一）
这篇讲的是防盗链的基本原理。作者从网页资源的加载过程切入，指出浏览器呈现一个完整页面需要发起大量GET请求，其中既包括本站资源，也可能包含非本站托管的外部资源。当网站A未经允许直接引用网站B的图片等资源，并从中获益时，就构成了“盗链”，这会消耗B站的流量。 文章核心对比了两种请求情况：直接访问页面时不会携带来源信息，而浏览器加载页面内的外部资源时，会自动在HTTP请求中加入`Referer`头，明确标示出请求的来源页面。资源服务器正是通过检查这个头域，来判断请求是否为本站或允许的来源。 对于非授权来源的请求，服务器可以拒绝提供资源，返回错误图片或提示信息，从而有效防止盗链。文章通过抓包截图直观展示了请求过程，清晰阐述了如何利用`Referer`机制实现基础防护，并为后续讨论跨域访问问题做了铺垫。
