CSS 中的标点悬挂及其现状
这篇讲的是 CSS 中的“标点悬挂”这个细节但重要的排版问题。作者从中文排版的实际需求出发，解释了为什么标点符号（如逗号、句号）如果“挤”在行首会破坏版面的紧致与美观，并详细说明了如何让标点“悬挂”在行外，不占用正文的字距空间。 文章的核心对比在于实现方式：虽然通过 `text-decoration` 这个非标准属性可以模拟效果，但现代浏览器正在原生支持 `text-spacing-trim` 这一新属性，它能更精准、优雅地处理全角标点的挤占问题。作者深入剖析了两者的实现原理与差异，并指出了当前浏览器的兼容性现状——这是开发者需要密切关注的实践关键。 对于关注中文网页排版的前端工程师而言，这篇文章厘清了概念、对比了方案，并点明了技术演进的方向，对提升界面精致度有直接的参考价值。
如何使用CSS判断鼠标从哪个方向进入元素？
这篇讲的是前端开发中一个很实用的细节：如何用纯CSS或结合少量JS，来精准判断鼠标是从哪个方向进入一个元素的。作者从常见的菜单悬停效果切入，直接对比了两种主流思路。一种是利用JavaScript监听事件来计算方向，另一种则是通过巧妙的CSS变量与伪元素配合，仅用`mouseenter`触发就能实现方向感知。文章不仅展示了最终效果，还拆解了每种方案的核心实现逻辑，比如CSS方案中如何通过过渡属性控制伪元素的“展开”动画，从而自然呈现进出方向。作者对比了两种方案的代码量、性能开销以及适用的场景，指出纯CSS方案在轻量级交互中更显优雅，而JS方案在复杂逻辑中则更灵活。读完后，你不仅能直接套用代码，更能理解这些技术选择的权衡点。
CSS3 Flexbox解决方案
这篇文章直指CSS布局长期以来的痛点——缺乏一套优雅、直观的解决方案。作者通过一个名为“Flexbox解决方案”的实例合集，展示了Flexbox如何一举攻克那些曾让开发者头疼的布局难题。 它没有停留在理论讲解，而是聚焦于实战：从更简单灵活的栅格系统，到历史上几乎无解的“圣杯布局”；从需要clearfix hack的媒体对象，到高度未知的“粘性页脚”和经典“垂直居中”问题，Flexbox都提供了简洁得近乎“魔法”的代码实现。这些Demo证明，许多过去需要依赖复杂浮动、定位或框架才能勉强实现的效果，如今用一两个Flexbox属性就能搞定。 更关键的是，随着IE11和Safari 6.1的发布，这套规格已获所有现代浏览器支持。文章提供的源代码和在线演示，让开发者能直观看到，当Flexbox成为布局基石后，CSS代码可以变得多么干净与高效。它预示着Web布局方式正迎来一次实质性的简化。
HTML代码到底该不该压缩
这篇文章从一个常见问题出发：开发者常问如何让静态缓存插件支持HTML压缩。作者没有直接讨论实现，而是通过数据分析来探讨HTML代码压缩在今天是否仍有实际意义。 作者首先解释了HTML压缩的本质——主要删除空格、制表符、注释等文本中有意义但浏览器显示时非必要的字符。通过一个Python脚本对100个网页的实测，他发现HTML压缩率最高可超过20%。然而，真正的关键在于后续的对比分析。作者进一步用实验比较了原始HTML、仅HTML压缩、仅Gzip压缩以及“HTML压缩后再Gzip压缩”这四种情况下的文件大小。 数据图表清晰地揭示了两个核心结论：一是HTML压缩带来的空间节省，仅在原始文件较大时才相对明显；二是在服务器已开启广泛使用的Gzip压缩的前提下，网页本身是否经过HTML压缩，对最终传输体积的影响微乎其微。因此，对于大多数网站而言，这种压缩对性能提升意义有限，反而可能影响开发调试效率。 文章最后补充了一个有趣的视角：在像Google这样流量占全球近40%的超大规模场景下，即使是单次请求节省一个字节，累积起来也是巨大的流量成本节省。这说明任何优化的价值，都需要结合实际的应用规模和上下文来评判。
utf-8页面form提交到gb2312页面编码的问题
这篇讲的是一个在多编码页面交互时常见的“坑”：UTF-8页面中的表单，通过GET方式提交到另一个UTF-8页面进行处理后，再将参数传给编码为GB2312的iframe页面，结果数据变成乱码。作者明确这是编码转换不一致导致的问题。 在尝试了用VBScript处理（不跨浏览器）和嵌套空白页提交（过于繁琐）等方案后，文章推荐了一个非常简洁有效的解决方法。核心是利用了HTML表单一个不太常用的属性：`accept-charset`。只需在表单标签中加入`accept-charset="gb2312"`（若提交到UTF-8页面则反之），即可告知浏览器按指定编码提交表单数据。 不过，针对IE浏览器的特殊性，作者还补充了一个关键的Hack：需要在`onsubmit`事件中添加`document.charset='gb2312'`。这样，仅仅几行代码，就能让不同编码的页面间正确传递表单参数，避免乱码。
好用的CSS模块化打包工具CSS-Combo
这篇讲的是如何用一个轻量工具解决CSS开发中的模块化管理难题。作者从团队实践出发，指出CSS开发长期缺乏像JS那样成熟的模块化方案，导致大型项目样式文件臃肿、维护困难。 核心思路是利用CSS原生的`@import`语法。在开发时，将样式拆分成多个子模块文件（如`header.css`、`layout.css`），然后在一个主入口文件中按需引入。这种方式浏览器直接支持，方便本地调试和团队协作，模块职责清晰，增删功能也只需注释掉对应的`@import`行。 不过，直接使用`@import`会导致线上性能问题（如请求过多）。因此，作者开发了配套的NodeJS工具 **CSS-Combo**。开发者在上线前运行简单命令，即可将所有通过`@import`引入的模块合并、压缩成一个CSS文件，兼顾了开发时的灵活性与上线时的性能。 文章还分享了利用此模块化方案进行线上调试的技巧（如通过URL参数切换源码与打包文件），以及关于`@import`语法规则的最佳实践。对于仍不习惯使用LESS/SASS等预处理器的团队，这是一种原生、直接的CSS模块化与打包解决方案。
CSS Gradient详解
这篇文章讲的是如何用 CSS Gradient 优雅地实现背景渐变效果，解决设计师交付的几十KB渐变背景图带来的性能问题。作者从现代浏览器的兼容性现状切入，指出虽然三种历史语法很复杂，但重点掌握最新的标准语法已能覆盖主流环境，并提供了纯色降级方案来兼容老旧浏览器。 文章系统地拆解了渐变的核心概念。它明确了 Gradient 本质是一种由浏览器生成的图片（image），因此可以应用在背景、列表样式等多种场景。针对最重要的线性渐变（linear-gradient），详细说明了两个关键参数：一是通过角度（如90deg）或关键词（如to right）定义方向；二是颜色断点（color-stop）的精确设置，包括其位置省略时的均值分配规则。 更难得的是，文章深入到了浏览器绘制的底层原理——解释了渐变线（gradient line）如何根据元素尺寸和指定角度通过几何计算生成。最后作者强调，理解这些原理能帮助前端开发者在还原设计稿时做到心中有数，而不仅仅是凭感觉试错。整篇文章从实用技巧到实现原理都覆盖得扎实清晰。
网页布局中对全局字体的最佳控制
这篇讲的是如何在网页CSS中设置全局`font-family`，作者基于实际踩坑经验，对比了几种常见写法的优缺点，最终给出了一个跨平台的推荐方案。 文章对比了包括`Arial, sans-serif`、`"宋体", sans-serif`、`Tahoma, sans-serif`等几种写法。例如，直接使用“宋体”在Safari和Vista的IE7下显示效果差，且英文部分不美观；而使用Tahoma虽然字体漂亮，但在IE6中会出现中文下划线贴紧、13px字号显示异常以及混合排版时`vertical-align`导致的文字错位等具体bug。 相比之下，`font-family: Arial, sans-serif;`被作者认为是全局字体设置中最合适的选择。它解决了Tahoma在IE6下的前两个问题，且第三个布局bug也有成熟的`zoom:1`解决方案。文章最后还补充了一个重要细节：在IE浏览器中，所有表单元素（如`input`、`select`）不会继承`body`的字体，需要单独显式设置。 作者从多种写法的实践对比出发，最终收敛到一个兼顾不同操作系统（XP、Vista、Mac）默认字体显示效果，且规避了常见浏览器渲染bug的解决方案，这对于处理复杂的前端兼容性问题有很强的参考价值。
给HTML初学者的30条最佳实践
这篇来自Nettuts+的文章专为刚踏入Web开发领域的HTML初学者准备，作者从实际编码中最易犯错的细节出发，系统梳理了30条旨在培养良好习惯的编码实践。 文章并非空谈理论，而是从“保持标签闭合”这类基础却至关重要的习惯讲起，直指新手常犯的省略标签、忽略包裹容器等错误。随后，它明确了声明正确DOCTYPE的必要性，并强烈建议将样式与结构分离——坚决使用外部CSS，杜绝内联样式。对于提升页面性能，文章给出了具体方案：将CSS链接置于`
`以加快渲染，而将JavaScript文件放在``标签前以避免阻塞页面呈现。作者甚至告诫“现在不是1996年了”，应摒弃内联JS的陈旧写法。贯穿全文的是“边开发，边验证”的理念，强调利用验证工具辅助编写标准、健壮的代码。 这些实践看似简单，却是构建可维护、高性能网页的基石。对于经验尚浅的开发者，遵循这些准则能有效规避早期养成的坏习惯，为后续学习更复杂的技术打下扎实、规范的基础。
一些有用的HTML5 pattern
这篇讲的是手机端表单输入体验的一个具体痛点。作者从实际开发中遇到数字键盘显示多余的字母出发，对比了 HTML5 中 `type="tel"` 和 `type="number"` 的优劣：前者键盘统一但字母碍眼，后者在 Android 上是纯数字键盘，但在 iOS 上体验不佳，且旧版 Android 还有样式小尾巴。 为了解决这些不完美，作者深入探索了 `pattern` 属性。文章指出，虽然 `pattern` 的主要作用是通过正则表达式进行前端格式验证，但它的写法会影响移动端调起的键盘类型。例如，在 iOS 上，`pattern="[0-9]*"` 能成功调出九宫格数字键盘，而 `pattern="\d"` 则不行；到了 Android 高版本，系统则更认 `type` 属性本身。 文章还整理了一份实用的常用正则表达式清单，涵盖了信用卡、手机号、身份证、密码等多种常见表单场景。尽管 `pattern` 的整体浏览器支持情况不理想，但对于开头提到的优化数字输入键盘这一具体需求，它在 iOS 和 Android 主流设备上都能有效工作，为开发者提供了一个轻量级的解决方案。
12个很少被人知道的CSS事实
作者从多年积累的CSS实战经验出发，分享了一系列常被忽视的语言细节。这些知识或许不常用于日常开发，但了解它们能帮助我们更深入地理解CSS的运作逻辑。 文章提到，body上设置的color属性不仅影响文本，还会间接应用于图片alt文字、列表边框与标记、hr元素等。visibility属性除了常用的visible和hidden，还有一个很少被用到的collapse值，在表格中能实现真正的空间清除。CSS3让background简写属性扩展到8个值，使用斜杠分隔position和size，编写时需要留意语法。clip属性生效有一个关键前提：元素必须设置为absolute或fixed定位。此外，垂直方向的margin/padding百分比是根据父级宽度而非高度计算的，border和text-decoration的简写也分别包含了更细分的子属性。 这些“冷知识”虽然应用场景有限，却像是CSS世界中的隐藏彩蛋，读来令人会心一笑，也能提醒我们：即便是熟悉的属性，底层规则可能仍有新意。
使用 Sass (Using Sass)-插件，缓存，配置选项，语法选择及编码格式
这篇整理自官方文档的指南，深入浅出地介绍了 Sass 的三种核心使用方式：作为命令行工具、Ruby 模块以及 Rack/Rails/Merb 框架的插件。文章首先从安装 Sass gem 讲起，然后逐步展开不同场景下的具体用法。 在命令行部分，它演示了如何快速编译单个文件，以及使用 `--watch` 命令实时监控文件或整个目录的变化并自动更新 CSS，这对提升开发效率很有帮助。文章还展示了如何在 Ruby 代码中直接调用 `Sass::Engine` 进行编译。 对于框架集成，内容覆盖了 Rails 2、Rails 3、Merb 以及 Rack 应用的具体配置步骤，比如在 `Gemfile` 或 `config.ru` 中添加必要的代码。这些细节对于在实际项目中落地 Sass 非常实用。总的来说，无论你是想在本地环境快速上手，还是将 Sass 嵌入已有的 Web 框架，这篇文章都提供了清晰、可操作的路径。
用CSS代码写出的各种形状图形的方法
用CSS“画”图形，这篇是个实用的手册。作者一共整理了20种常见图形的CSS实现方法，从基础的正方形、长方形，到需要利用border技巧“掰”出来的各种方向的三角形、梯形，再到运用了`transform`变形和伪元素组合而成的六角星、五角星、五边形等复杂形状。 文章的核心价值在于它并非空谈理论，而是为每个图形都附上了可以直接使用的代码和效果预览。比如，实现一个平行四边形只需要一个`skew`变形，而画一个五角星则需要精巧地组合主元素与`before`、`after`伪元素，并配合旋转角度。这些示例清晰地展示了如何通过属性的叠加与变换，将简单的矩形“雕刻”成所需的任何形状。 对于前端开发者而言，这既是一份方便查阅的代码清单，也是一个学习CSS几何与变形技巧的趣味案例集。它直观地体现了CSS的灵活性，证明了无需依赖图片，仅用代码就能创造出丰富的视觉元素。
正确使用HTML title属性
这篇讲的是 HTML 的 title 属性，一个存在了超过 14 年却问题重重的特性。作者开篇点明，在某些场景下（例如对辅助技术和移动设备用户隐藏内容，只对键盘用户显示）title 属性似乎是合理的选择，但随即指出其本身存在广泛且严重的缺陷。 文章的核心在于揭示 title 属性的“鸡肋”本质：随着触摸设备的普及，其作用被进一步削弱。关键问题在于，它对手机用户、仅键盘操作者、以及依赖屏幕阅读器、屏幕放大器等辅助技术的用户群体非常不友好。浏览器缺乏支持，无法通过键盘或移动端触发显示其内容，屏幕阅读器也普遍不予播报，这使得它无法可靠地传递信息。 在有限的“有用”场景中，文章建议仅在为 frame/iframe 贴标签，或提供需要程序实现才能在特定情况下显示的辅助标签时使用。相反，作者详细列举了多种“无用或有害”的用法，例如用它来替代表单标签、为图片添加标题、提供与可见文本重复的信息，或作为缩写扩展等，并解释了这些做法为何对可访问性和用户体验没有帮助甚至造成干扰。 因此，这篇文章为前端开发者和内容创作者提供了一个清晰的避坑指南：在为元素添加额外信息时，应优先考虑确保内容对所有用户可见且可访问，而不是仅仅依赖这个支持度不足的 title 属性。
HTML5视频的那些事儿
这篇文章讲的是HTML5视频背后那堆让人头疼的概念和选择。作者从视频技术早于Web存在的历史讲起，梳理了我们常见的rmvb、mp4、flv等格式背后复杂的“三层结构”：容器、视频编解码器和音频编解码器，并用清晰的表格总结了mp4、ogg等主流组合的对应关系。 厘清这些后，文章转向HTML5的解决方案。它回顾了从黑盒的`embed`标签到功能强大但代码复杂的Flash插件的时代，引出了简洁的`
浅析line-height和vertical
这篇从基础的居中问题出发，深入剖析了两个常被误解的CSS属性：line-height和vertical-align。作者首先厘清了line-height的本质——它影响的是行框高度，并通过一系列对比实验揭示了关键差异：无单位数值（如1.5）会将比例传递给子元素，而百分比（如150%）则会将父元素计算后的固定值传递下去，这正是为何“1”与“100%”效果不同的根源。 文章还通过设置line-height:0等边界情况，直观展示了它对块级元素和行内元素影响的根本区别：块级元素的高度会随之收缩，而行内元素（如span）的高度则保持不变。关于vertical-align，作者明确指出它仅对inline和inline-block元素生效，并图解了top、middle、text-bottom等不同对齐值的具体依据（如middle是与父元素基线加上1/2 x高度对齐），帮助读者理解这些值在垂直方向上的精确定位逻辑。
《web前端最佳实践》—高维护性css
这篇讲的是如何让CSS代码更易维护。作者指出，CSS虽然上手简单，但若不加规范，很快就会变得混乱难改。文章从几个核心实践出发，探讨如何组织和书写高维护性的CSS代码。 首先是代码组织，建议将CSS文件按通用和业务模块分类，并单独处理浏览器兼容和基础重置样式。其次是书写规范，比如对属性进行逻辑排序、合理使用CSS Reset来统一浏览器默认样式。在选择器方面，应尽量避免高权重的ID选择器，多用组合类选择符以降低耦合。文章还提及了IE兼容代码的分离技巧，以及在em、px和%之间如何选择更合适的相对单位。 总的来说，作者通过这些具体、可操作的建议，为前端开发者提供了一套提升CSS项目质量与效率的实践框架，帮助团队写出更整洁、更灵活的样式代码。
《web前端最佳实践》—高性能css
这篇讲的是如何让CSS代码跑得更快。作者没有停留在理论层面，而是直击开发者日常编码中的常见痛点，给出了非常具体的优化指南。 文章开篇点破一个常见误解：很多人以为CSS选择器是从左向右匹配的，但事实恰恰相反——浏览器是从最右侧的选择器开始遍历的。基于这个原理，作者给出了几条黄金准则，比如避免使用通配符和标签选择器，层级不宜过多等。不过他也提醒，在性能影响不明显的小项目中，代码的可维护性应放在首位。 在图片处理上，文章对比了两种方案：一是不要随意用CSS缩放图片，而是准备合适尺寸的图片资源；二是谨慎使用CSS雪碧图。虽然雪碧图能减少HTTP请求，但它在制作和维护上都比较复杂，用不好反而会因内存消耗过大拖累性能。作者给出了非常落地的实践建议，比如将雪碧图尺寸控制在2500像素以内、200KB以下。 文章后半部分聚焦于代码瘦身和CSS3的兼容性处理。前者教你怎么合并与精简规则，删除无效代码；后者则详细剖析了浏览器前缀的使用策略，以及如何通过Modernizr等工具稳妥地应用新特性，避免为兼容性付出过高的性能代价。 总的来说，这篇文章将“高性能CSS”这个大话题拆解成了一个个可操作的具体动作，不仅告诉你“不该做什么”，更重点阐明了“应该怎么做以及为什么”，是前端工程师在追求卓越用户体验路上一份扎实的参考清单。
图片以及其他替换元素的空隙问题
这篇讲的是开发者经常遇到的一个小困扰：明明没设置任何边距，图片（或其他替换元素）之间却莫名出现空隙。 作者从一个具体场景切入——“图片右边和底部总有神秘缝隙，把 margin、padding 全清除了也没用”，然后点明了问题的根源：图片作为行内替换元素，默认的 `vertical-align` 基线对齐方式与父元素基线之间存在一段距离，这便是“空隙”的来历。 针对这个“不听话”的空隙，文章梳理了六种主要解法。核心思路包括改变元素的行内特性，比如将 `font-size` 设为 `0`，或者干脆把图片设为 `display: block`；也可以利用浮动 (`float`) 让元素脱离文档流。此外，调整 `vertical-align` 的值（如设为 `top` 或 `bottom`）也能消除空隙，但作者提醒需注意其对页面其他内容可能产生的影响。最后还提到了给父容器定高以及在代码上让标签“无缝拼接”的格式化方法。 文章的一个亮点是将讨论从 `img` 扩展到了 `input`、`textarea` 等所有替换元素，解释了它们具有相同的空隙特性，帮助读者建立更完整的认知。整篇内容直击痛点，提供的解决方案具体且可操作，能帮助开发者从原理上理解并彻底处理这类布局问题。
前端编码规范（4）—— CSS 和 Sass (SCSS) 规范
这篇文章讲的是前端开发中CSS与Sass的编码规范，核心聚焦于如何通过编写可维护的样式代码来提升长期项目效率。作者从选择器命名、ID使用、标签选择器和选择器精确性四个关键维度出发，给出了一系列具体且可操作的建议。 比如，在命名上提倡使用能反映元素目的的语义化类名（如 `.important`）替代表象名称（如 `.red`）；明确指出应尽量避免使用ID选择器进行样式定义，因为其权重过高且无法复用，会给后期维护带来“选择器战争”的隐患。同时，文章强调要摆脱对HTML标签的选择器依赖（如 `div.content`），应使用纯粹的类名，并善用直接子选择器（`>`）来精确控制样式作用范围，避免因样式过度继承而导致的意外覆盖问题。 整篇文章通过大量“不推荐”与“推荐”的代码示例对比，清晰地阐述了每条规范背后的逻辑。它并非罗列条条框框，而是为前端开发者，尤其是处理中大型项目的团队，提供了一套减少样式冲突、提升代码健壮性和协作效率的实用方法论。