移动端自适应方案
这篇文章探讨了移动端页面适配的核心问题：是否需要动态调整viewport的scale，以及如何选择最合适的自适应方案。作者从css开发者大会的分享出发，深入分析了手淘、天猫和手机携程三家大型网站的实际做法。 手淘方案通过获取设备dpr，动态生成viewport并利用rem进行布局；天猫则采用固定scale=1.0，结合flex布局以iPhone6宽度（375px）为基准；手机携程相对传统，使用固定的scale配合px与百分比布局。 作者针对常见的“1px问题”和“倍图适配”需求进行了实验验证。结论是，虽然动态调整scale能精确还原设计稿的1px边线并匹配不同dpr的图片，但实现成本较高。对于大多数项目，采用固定scale=1.0的“完美视口”，并配合rem管理尺寸、flex构建布局，是一种性价比很高、足以应对多数场景的实践方案。关键在于根据项目对还原度的具体要求，在开发成本与效果之间做出权衡。
了解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中使用较少，但对于维护遗留系统或特定内嵌场景仍有实用意义。
说说基本的布局观
这篇文章从作者的个人经历出发，用五个串联的小故事，回顾了网页布局观念从模糊到清晰的演进过程。从大学课堂听到“表格布局”、初学时用float解决导航横排，到误解“div+css”是一门技术，再到面试时对“结构表现分离”的懵懂回答，生动展现了初学者可能遇到的典型认知阶段。 作者的核心观点是，网页布局并非指某种特定技术名词（如“表格”或“浮动”），其能力根植于对一系列基础CSS属性的掌握与理解。文章将“盒模型”广义化，强调了width、height、padding、margin、position、display等众多属性才是构成布局控制力的基本单元，而非那些封装好的“方案”或“框架”。 这篇内容特别适合前端入门者阅读。它不追求高深技巧，而是帮助新手厘清基础概念，建立从“容器摆放”到“属性控制”的正确布局观，理解一段有效代码背后的设计意图，避免在学习初期形成片面或错误的认识。
小tips: zoom和transform:scale的区别
这篇文章厘清了CSS中两个容易混淆的缩放属性：zoom与transform:scale。作者从浏览器兼容性、语法等表象差异出发，深入剖析了两者更根本的区别。 关键在于，zoom缩放会改变元素的真实占据空间，从而影响页面布局，其性能开销也因此更大，容易触发整个页面的重排；而scale缩放则保持元素原始尺寸不变，不影响布局，仅在视觉层重绘，性能更优。此外，它们的缩放起点也不同：zoom默认从左上角开始，scale默认从中心点开始。 文章还指出，zoom虽然非标准，但在移动端可用于静态内容控制，以节省宝贵的transform属性资源；而实现动画缩放时，则需谨慎选择，避免因zoom的性能问题导致页面卡顿。最后，作者提醒，在Chrome等浏览器中切勿同时叠加使用zoom与scale，因为其缩放效果会累加。
word-break:break-all和word-wrap:break-word的区别
这篇讲的是两个极易混淆的CSS换行属性：word-break:break-all和word-wrap:break-word。作者从CSS学习需要经验积累的实际感受出发，深入剖析了这两个属性的渊源、定义以及核心差异。 关键的区别在于换行逻辑：break-all是“强制派”，它允许在任意字符处断行，即使把英文单词拆得七零八落；而break-word则是“谨慎派”，它优先寻找空格或CJK字符等自然断点，只有在一行文字完全无法容纳时，才在单词中间强行换行。这导致break-all的换行更彻底但可能破坏阅读，而break-word则可能产生参差不齐的留白。 文章还梳理了属性的演进历史（word-wrap在CSS3中更名为overflow-wrap）以及详细的浏览器兼容性数据，并提供了直观的在线Demo对比。最后，作者分享了“wbba（微博吧）和wwbw（我五百万）”的记忆技巧，帮助开发者在实战中快速区分和正确应用。
小tips: CSS或JS实现gif动态图片的停止与播放
这篇讲的是如何在网页上实现对gif动态图片播放状态的精确控制。作者从日常刷微博时遇到的gif小测试游戏说起，引出了浏览器ESC键停止gif的局限性：兼容性差、功能模糊，且移动端无法使用。由此提出了核心问题：在很多场景下，我们确实需要可控地暂停或停止gif的播放，比如为了省电、省流量，或者仅仅是为了提升用户体验。 文章系统地介绍了三种不同场景下的解决方案。第一种最简单：为gif准备一张静态帧图，通过JS切换图片源，兼容所有浏览器，但只能“停止”而不能“暂停”在某一帧。第二种则利用CSS3 animation模拟gif效果，通过`animation-play-state: paused;`属性可以实现完美的暂停，但要求gif是开发者自己制作的动画精灵图。 面对用户上传的、无法提前处理的gif，作者给出了第三种“终极大法”：使用JS和HTML5 Canvas。通过读取原始gif并在Canvas上重绘第一帧，可以实现暂停效果。虽然目前也只能“停止”而非“暂停”在任意帧，且不兼容老版本IE，但这个方案解决了gif来源不可控时的关键痛点。文章最后还贴心地建议，从省流量和省电角度出发，移动端应默认停止gif播放，交由用户点击触发。
HTML input type=file文件选择表单元素二三事
这篇讲的是HTML中一个常见但常被忽视的元素——`input type=file`，作者从其基础语法聊起，一路梳理了它在HTML5时代的“复兴”与演进。文章核心对比了在不同浏览器和HTML标准下，原生文件上传能力的变迁：过去只能单图上传，常被Flash插件替代；如今借助`multiple`属性、File API和FormData，已经能流畅实现多图选择、预览乃至Ajax上传。 作者也详细拆解了使用原生方案时绕不开的几个关键点：表单必须设置`enctype="multipart/form-data"`；图片预览在老IE和现代浏览器中有截然不同的实现路径；而那个“丑陋”的默认按钮，可以通过`label`元素优雅地关联自定义样式。此外，文章还实用地介绍了`accept`属性如何用MIME类型过滤文件（比如`accept="image/*"`），以及通过`form.reset()`来清除已选择文件值的便捷方法。对于需要兼容IE8-9的PC项目，文章也指出了原生HTML5与Flash方案混合使用的常见策略。整体上，它把一个表单元素背后的兼容性考量、交互优化与API细节讲得颇为透彻。
小tip: 如何让contenteditable元素只能输入纯文本
这篇讲的是如何在 `contenteditable` 元素中实现“纯文本输入”的几种前端实践。作者从实际开发中“粘贴富文本”导致格式污染的痛点出发，对比了解决该问题的不同方案。 首先，他介绍了利用 CSS 属性 `-webkit-user-modify: read-write-plaintext-only` 的方法，该属性在 WebKit 内核浏览器（如 Chrome、Safari）中能有效限制输入，但兼容性有限。随后，文章深入到 HTML 标准，指出 `contenteditable` 属性存在一个鲜为人知的 `plaintext-only` 新值，它同样主要在 Chrome 中表现良好。 鉴于上述方案的兼容性局限，作者最终提供了一种更具普适性的 JavaScript 解决方案：通过监听 `paste` 事件，拦截剪贴板内容，过滤掉 HTML 标签，再以纯文本形式插入元素。文末附上了具体的代码实现，并指出此方法能兼容包括 IE8 在内的主流浏览器。 因此，这篇文章为开发者提供了从 CSS、HTML 到 JavaScript 的多层次工具箱，帮助大家根据项目的技术栈和兼容性要求，选择最合适的“纯文本编辑”实现路径。
理解CSS3 isolation: isolate的表现和作用
这篇讲的是CSS3属性`isolation: isolate`在混合模式（`mix-blend-mode`）中的精准控制作用。作者从实际场景出发：当一个元素使用了混合模式时，它默认会与所有下层元素进行混合。如果我们只想让混合发生在特定的父子元素或一组兄弟元素之间，该怎么办？`isolation: isolate`正是为解决这个问题而生。 其核心原理在于，`isolation: isolate`能为元素创建一个新的层叠上下文（stacking context），从而将混合效果“隔离”在这个上下文内部。更进一步，作者指出，任何能创建层叠上下文的属性（如`position: relative`、`opacity`不为1、`transform`不为none等）都能达到阻断混合模式的效果。此外，文章还对比了`background-blend-mode`，说明它天然是一个封闭的混合领域，无需额外隔离。 文章不仅解释了用法，更揭示了其背后由层叠上下文所构建的CSS复杂交互逻辑，展示了现代CSS能力与规则的紧密交织。
深入理解CSS中的层叠上下文和层叠顺序
The request was rejected because it was considered high risk
HTML textarea cols,rows属性和宽度高度关系研究
这篇讲的是 HTML 中 textarea 元素的 cols 和 rows 属性如何影响其可视尺寸。作者从基础用法出发，深入探讨了这两个属性值与最终像素宽度、高度之间是否存在明确的计算公式，以及 CSS 样式（如字体大小、字符间距）是否会介入其中。 通过搭建测试页面进行多浏览器验证，文章揭示了一个关键结论：cols 属性决定的宽度基础值与当前字体下“x”字符的宽度紧密相关，且在 IE 浏览器中其计算基准是等宽字体（monospace）的宽度。更重要的是，研究证实字体大小本身并不会影响 cols 值所计算出的宽度，但字符间距（letter-spacing）这个 CSS 属性则会产生影响。 作者对不同浏览器行为的详细对比，澄清了一个常见的认知模糊点。对于需要在前端精确控制文本域布局的开发者来说，这篇基于实证测试的文章厘清了属性与样式间的交互规则，提供了清晰的实现指引。
CSS 的 22 个必备技巧
这篇讲的是那些能让你的CSS代码更优雅、效果更出彩的实用技巧。文章从现代浏览器开始支持的混合模式（mix-blend-mode）聊起，展示了如何像PS一样在网页上玩转图层混合效果。接着，它解决了“如何给边框加上渐变”这个常见需求，方法是通过一个负z-index的伪元素来巧妙实现。 你还会发现，原来z-index的值也能参与CSS过渡动画，让层级变化变得平滑；一个简单的currentColor关键字，就能让SVG图标和边框颜色自动跟随文字颜色变化，省去了大量重复定义的代码。对于图片显示难题，文章推荐用object-fit属性来替代背景图的background-size，实现更灵活的裁剪和缩放。 此外，文章还分享了如何用纯CSS为复选框和单选按钮打造自定义外观。整体来看，这些技巧都紧贴日常开发场景，代码示例清晰可复用，能帮助前端开发者快速提升页面表现力与代码效率。
CSS font关键字属性值的简单研究
这篇讲的是CSS `font`属性中一个容易被忽略但很实用的特性——关键字属性值。我们平时用`font`多半是做缩写，比如`font: 14px simsun;`，但作者从这里出发，引出了另一种完全不同的用法：直接使用`caption`、`menu`、`status-bar`等系统关键字。 这两种方式有着根本区别。缩写至少要指定`font-size`和`font-family`，而关键字是独立的单一值，它直接映射到操作系统部件（如按钮、菜单、状态栏）所使用的字体。作者通过在Windows 7和iOS上对Chrome、Firefox、IE等浏览器的实测发现，虽然所有现代浏览器都支持规范内的这些关键字，但不同关键字在不同系统和浏览器中映射到的字体和字号存在明显差异。例如，同一个`caption`关键字，在Windows Chrome下可能是16px的微软雅黑，在iOS Safari下则可能是13px的另一种字体。文章也指出了非标准关键字（如`-moz-button`）兼容性较差，实际应用价值不大。 那么，这个特性有什么用？作者发现它最大的价值在于优雅地实现跨平台字体自适应。比如，我们希望在Windows下使用微软雅黑，而在iOS下使用系统默认的、更好看的字体，以前可能需要写浏览器判断或CSS hack。现在，只需在`body`上设置`font: menu;`或`font: status-bar;`，再补上统一的`font-size`即可。这样就让每个系统自动调用其最匹配的界面字体，代码简洁且兼容性有保障。
基于原生HTML的UI组件开发
作者从一次实践出发，探讨了一种有趣的UI组件开发思路：不抛弃原生HTML，而是对其进行“升级”。文章以一个包含日期选择、表单验证等基础功能的表单页面为例，展示了如何通过引入特定的CSS和JS，在完全不修改原有业务逻辑的情况下，将原本粗糙的原生界面瞬间变得精致美观。 其核心方案在于，识别出浏览器原生UI（如title提示、HTML5表单验证）与自定义UI组件在功能本质上的一致性，差异仅在于视觉呈现。因此，组件开发的关键变成了“为原生功能穿上漂亮的外衣”。实现上，组件的API参数直接来源于HTML属性，回调则触发原生事件，从而让组件能与原有的JavaScript代码无缝对接。 这种“丑小鸭变白天鹅”式的平滑增强，使得UI组件回归了美化界面的本职工作，实现了与业务逻辑的清晰分离。对于追求开发效率、希望渐进式提升项目体验的前端开发者而言，这种回归本源的思路提供了一个非常实用且巧妙的视角。
HTML5+CSS3 loading 效果收集
这篇讲的是前端加载动画的“进化”。随着CSS3能力的提升，那种略显粗糙的GIF加载图正在被淘汰，取而代之的是用纯CSS3、HTML5甚至SVG和Canvas构建的、流畅且充满设计感的加载动画，这已成为提升产品质感的一种明确趋势。 作者为此做了一份详实的“素材库”盘点，汇集了数十种纯CSS3实现的loading效果。从模拟彩虹渐变的条形加载器，到单元素的Slack风格动画；从精致的齿轮旋转、天气动画，到复刻Android Kitkat系统的经典效果。几乎每种设计都提供了可直接体验的Demo和源码下载链接，覆盖了从极简到创意、从拟物到抽象的多种风格。 对于前端开发者而言，这不只是一份效果预览合集。它更像一个按需取用的“创意工具箱”，你可以根据项目气质——是科技感、趣味性还是品牌一致性——去挑选一个顺眼的动效，直接嵌入项目或从中获取灵感，彻底告别过去那张单调的loading.gif。
CSS中的margin外边距折叠现象
这篇讲的是CSS中一个常见但容易让人困惑的布局现象——margin外边距折叠。文章从概念入手，清晰地定义了发生折叠的两个核心条件：相邻的margin之间没有被内容、padding、border或clear等属性分隔，且它们都处于普通文档流中。 文章的重点放在了折叠的具体计算规则上，通过三个直观的示例代码和示意图，分别讲解了参与折叠的margin全部为正值、全部为负值，以及正负值混合时的处理方法。例如，当两个正margin（50px和100px）相遇时，最终间距取较大的100px；而当正负margin（-50px和100px）相遇时，则会先取绝对值最大的负margin，再与最大的正margin相加，得到50px的结果。 这些规则解释清楚了为什么在垂直方向上，两个块级元素的间距有时会“不听使唤”。对于前端开发者，尤其是刚接触CSS布局的开发者来说，理解这一机制是避免样式计算“踩坑”、精准控制页面元素间距的基础。
用CSS绘制各种角度的三角形
这篇讲的是如何用CSS中看似用于边框的`border`属性，来“画”出各种方向的三角形。作者从一个有趣的技巧出发：将一个元素的`width`和`height`都设为0，使其内容区域消失，四个边框的交汇点就会合并成一个点。通过有策略地设置这个点的四周——将某些边框设为透明，另一些设为实色——就能精确地控制可见三角形的朝向和形状。 文章系统展示了正方形、上、下、左、右以及左上、右上等七个不同角度的三角形，并为每一种都提供了完整的HTML/CSS代码示例。这种教学方式非常直观，读者不仅能直接复制使用，更能理解其背后“调整中心点”的核心思路。它把一个基础的CSS特性，变成了绘制简单图形的实用小技巧。
理解SVG transform坐标变换
这篇讲的是HTML的CSS3 transform和SVG自带transform属性之间的差异，作者用了一个很生动的比喻——“谢霆锋和陈冠希的关系”——来说明两者既相似又复杂的联系。 核心差异在于坐标系统。HTML的transform默认相对于元素自身的中心点变换，而SVG的transform默认基于整个画布的左上角（0,0点）进行。这导致了旋转效果上巨大的不同：一个元素在HTML中可能围绕自身中心优雅地旋转，在SVG中却可能像坐过山车一样绕着画布原点大幅摆动。 作者也指出了SVG transform的一个关键优势：它的`rotate()`函数支持可选的[x, y]参数，允许我们手动指定旋转中心点。这完美解决了SVG坐标系带来的问题，让元素能像HTML中一样围绕自身中心旋转，同时避免了依赖可能在IE中不被支持的CSS `transform-origin`属性。此外，文章还澄清了语法细节，比如SVG transform的值不能带单位。 理解这些差异对于在网页中同时使用HTML和SVG图形至关重要，能帮助开发者精准控制元素的变换行为，避免不必要的渲染困惑。
写 CSS 时要避免的几个地方
这篇文章是一篇观点鲜明的“避坑指南”，作者从实践经验出发，犀利地指出了四个在编写CSS时常见的、需要避免的坏习惯。 作者开宗明义，认为CSS因其层叠和继承的特殊性，并不适合像JavaScript或HTML那样拆分成多个独立文件，因为样式的声明顺序至关重要。他将过度拆分CSS文件比作“把一块玻璃丢在水泥地板上”。其次，他强烈批评了在Sass中使用深度嵌套，认为这会让本就可能混乱的CSS扩展出第二个维度的混乱，甚至引用了开发者Hugo Giraudel那句著名的“Fucking. Stop. Nesting.”。在单位使用上，他反对使用像素（px）进行布局，尤其是响应式设计中，倡导使用rem/em等相对单位，以便通过调整根字体大小轻松实现整体缩放。最后，他针对“设备断点”的做法提出质疑，认为响应式设计应针对“内容”在何处呈现不佳来设置断点，而非针对苹果、安卓等具体设备的屏幕尺寸。 总体而言，作者旨在提醒开发者：CSS有其独特的运行逻辑，不应简单套用其他语言的组织方式或死板地针对特定设备设计。真正的“响应式”应当服务于内容本身，并尊重用户对字体大小的偏好设置。