标签：CSS

共 444 篇相关文章

IT 累计浏览 2,949

消除疑问：CSS动画 VS JavaScript

这篇讲的是CSS动画和JavaScript动画之间的选择，并非像很多人想的那样简单。作者从自己作为动画爱好者的亲身体验出发，深入研究后发现，被广泛推崇的CSS动画其实存在一些缺陷。文章首先指出了CSS的一个明显短板：它的`transform`属性将缩放、旋转和位移捆绑在一起，无法用不同的时间和缓动函数独立控制，这在复杂动画序列中是个实际问题。更关键的是，作者拆解了“CSS动画性能更好”这一普遍认知。文章详细分析了“硬件加速”的两个层面：一是GPU层的创建，但这并非CSS专利，JavaScript通过`translate3d`等3D变换同样可以触发；二是将计算转移到不同线程，但这个过程本身有开销，且只对与文档流无关的属性有效，实际收益可能被高估。文中还通过压力测试对比显示，现代JavaScript动画库（如GSAP）的性能可以远超jQuery，并不逊色于基于CSS的方案。最终，文章澄清了一个核心观点：CSS动画并非在所有情况下都是“更干净”或性能更优的选择。理解它们各自的局限和性能本质，才能根据项目需求——是简单的整体变换，还是需要复杂独立控制的序列——做出更合理的技术决策。

IT 累计浏览 2,756

css透明度的一些兼容测试

这篇讲的是前端开发中一个常见的“坑”：如何让CSS透明度效果兼容到IE8及以下浏览器。作者从接手一个外包项目时遇到的真实问题说起——原本用`opacity`属性实现的半透明遮罩层，在旧版IE上直接变成了不透的黑色色块，完全破坏了页面设计。文章深入分析了问题根源：标准`opacity`会作用于整个元素及其所有内容，而IE的私有滤镜`filter: Alpha(opacity=...)`行为有所不同，且两者混合使用时在IE9等版本中会产生冲突。作者详细展示了三种解决方案的演进：先用`filter`配合`rgba`背景色打底；再针对IE9的异常表现，用条件注释单独处理；最后尝试用媒体查询hack（如`@media screen\9`）来更精简地分版本控制样式。过程中，作者也坦诚讨论了各种方案的局限，比如`filter`在IE6下可能失效，以及hack写法对维护性的潜在影响。文末的建议很实在：除非对设计还原度有极致要求，否则应谨慎使用这些浏览器特有的hack。整篇文章从实际故障出发，逐步拆解，对需要处理多端兼容的前端开发者有很具体的参考价值。

IT 累计浏览 2,906

CSS 设计理念

这篇讲的是CSS2.1规范背后的设计理念，梳理了其作为CSS2和CSS1后序版本的核心设计目标。文章开篇就点明了这些理念：向前和向后兼容，确保新旧用户代理都能优雅降级；作为结构化文档（如HTML）的补充，让样式易于修改而不影响内容；保持供应商、平台和设备无关，让文档适应各种环境；强调可维护性，通过外部样式表轻松管理全站外观。此外，它还提到了CSS的简洁性、对网络性能的优化（比图片等资源体积小得多）、通过层叠机制提供的灵活性、丰富的渲染效果，以及为动态语言绑定和可访问性（如允许用户覆盖样式、支持盲文设备）所做的考量。这些理念奠定了现代CSS的基础，其中关于兼容性、结构分离和可访问性的思考，至今仍深刻影响着前端开发的实践。

IT 累计浏览 1,928

邮件制作过程中需要注意的事项

与常规网页开发相比，电子邮件制作需要特别注意各种邮件客户端的兼容性差异。这篇文章系统梳理了从编码到布局的完整注意事项，核心在于应对不同客户端对HTML和CSS的支持度参差不齐。作者指出，编码首选UTF-8以防乱码；邮件本身需严格控制大小、长度和宽度（PC端建议不超650px）。技术实现上，必须回归传统：使用HTML 4.0和Table布局以规避样式错位，严禁引用外部样式表或使用Javascript等现代特性——它们大多已被屏蔽。图片处理也需格外细致，需指定尺寸、alt属性，并注意避免使用不支持的GIF格式或背景图。文章的价值在于，它将这些零散的“避坑指南”整合为清晰的开发守则，帮助开发者跳出网页思维，理解邮件环境的特殊限制。这些来自实战的细节经验，能有效避免邮件被截断、错乱或误判为垃圾邮件，直接提升送达率和用户体验。

IT 累计浏览 1,827

浏览器特性检测工具：Modernizr

这篇文章从早期前端开发中常见的浏览器嗅探技术切入，引出了一个至今仍普遍存在的问题：面对CSS3和HTML5等新技术时，各浏览器的支持程度依然参差不齐。作者指出，依赖navigator.userAgent进行浏览器身份推断已不可靠，取而代之的是更直接的“特征检测”——即询问浏览器“你能做什么？”而非“你是谁？”。 Modernizr正是为此而生的JavaScript库，它能够快速检测数十项HTML5和CSS3特性的支持情况，其执行效率极高。文章重点阐释了Modernizr所依托的“渐进增强”开发理念，即从基础功能层开始，逐层添加增强体验。它不仅能帮助开发者清晰地了解当前环境，还能通过提供polyfill脚本，模拟缺失的HTML5功能（如地理定位），从而填补浏览器的功能漏洞。此外，文章也贴心地介绍了Modernizr的两个版本：包含完整检测功能的development版适合学习和测试，而可按需定制的production版则能优化体积与性能。对于希望构建健壮、可适应不同环境的前端应用的开发者来说，Modernizr提供了一套可靠且高效的检测与应对工具箱。

IT 累计浏览 2,454

Print —— 被埋没的Media Type

这篇讲的是网页开发中一个被长期忽视的体验优化点：打印样式（Print Media Type）。作者从日常收藏网页的场景切入，指出很多网页的打印效果糟糕，根本原因在于开发者对“纸上阅读”这个特殊媒介缺乏针对性处理。文章系统梳理了打印样式的必要性、适用场景与实现方法。它分析了打印成本、无纸化提倡等因素导致该特性被冷落，但诸如优惠券、报销单据、教程手册等场景其实有切实需求。技术实现上，文章详解了如何通过 `@media print` 规则或独立 `print.css` 文件来引入打印样式，并介绍了 `@page` 页面版式、分页符控制，乃至“出血”等高级印刷概念。更通过一个CDC博客的改造实例，演示了如何通过隐藏导航栏/侧边栏、调整字体与宽度、添加二维码回链等步骤，将一个杂乱的页面转化为清爽的打印版本。作者最后总结道，优化的核心在于理解“纸上无交互”的本质，优先呈现纯粹的内容，并在保证可读性的前提下节约打印成本。对于需要提供离线阅读或实物归档功能的Web应用来说，这篇文章提供了切实可行的优化路径。

IT 累计浏览 1,988

IE开始支持部分webkit私有属性

这篇文章讨论了微软一个看似“令人震惊”的决策：在其Windows Phone 8.1 Update的IE 11移动版浏览器中，开始支持部分原本属于WebKit阵营的私有属性。作者指出，这背后是微软的务实妥协。由于许多网站在WP上因错误的浏览器检测、滥用过时的WebKit私有特性等原因导致表现糟糕，而WP市场份额又小到不足以引起开发者重视，微软只能选择让IE去“兼容”这些不规范的写法，以保障用户的体验。文章展示了百度在不同平台上的差异截图，直观说明了问题的严重性。具体来看，IE 11移动版新增支持了包括`-webkit-appearance`、`flexbox`、`transform`、`transition`及渐变等在内的众多WebKit相关属性，甚至修改了UA字符串以“冒充”Android/iOS设备。需要特别注意，这些改动仅限于移动版IE。这对开发者的启示非常明确：编写样式时应依赖标准规范，而非特定浏览器前缀；必须为各种情况准备降级方案，并在多平台进行兼容性测试。微软的这一举动，恰恰反映了当前Web开发中标准与现实之间存在的鸿沟。

IT 累计浏览 2,602

网页适配手机移动版的CSS

这篇讲的是用几个关键 CSS 技巧，来解决网页在手机上显示错乱、需要缩放的问题。作者从实际移动端适配场景出发，给出了三个环环相扣的解决方案。首先，要通过添加一个 `` 标签来禁止用户手动缩放页面，确保你的布局能按预设尺寸正常渲染。其次，用一条简单的 `img { max-width: 100% }` 规则，就能防止图片撑破容器，出现讨厌的横向滚动条。最后，对于表格、表单或内容容器，通过设置 `width: 100%` 并结合一个 `max-width`（比如 880px），可以让它们在电脑端保持合适的最大宽度，而在手机上则自动占满屏幕。这三个步骤非常基础但极其有效，分别处理了视口控制、图片响应式和容器流式布局这几个核心问题，是快速实现移动端友好网页的实用清单。

IT 累计浏览 3,276

网页重构应该避免的10大 CSS 糟糕用法

这篇文章系统性地总结了网页重构中10个应当避免的CSS坏习惯，并将它们归纳为“权重”、“工作流”和“自以为是”三大类。作者从权重控制这个核心痛点出发，详细剖析了滥用ID选择器、嵌套层级过深的选择器、内联样式等常见问题。例如，一个带有多个层级的ID选择器（如#header #title a）虽然看似语义明确，却会产生过高的特异性，导致后续样式覆盖困难，代码难以维护。在工作流方面，文章批评了从上到下、仅凭文档流命名的粗放方式，以及样式冗余问题。它强调应遵循DRY（不要重复自己）原则，并介绍了如何利用Sass的@extend等预处理器特性来抽象公共样式，提升代码复用性。此外，统一使用rem或em这类相对单位替代px，也被指出是提升样式灵活性和可维护性的重要一环。文章最后提醒开发者需关注CSS3新特性的浏览器兼容性，避免在样式表中堆积无效规则。整体而言，它为前端开发者提供了一份清晰的CSS反模式清单与改进指南，帮助团队建立更健壮、更易维护的样式架构。

IT 累计浏览 2,248

使用CSS和DataURI来添加杂色滤镜效果

这篇讲的是如何用纯CSS和DataURI技术，为网页元素添加杂色（Noise）纹理效果，且完全无需增加额外的HTTP请求。文章从一篇国外博文出发，整理并实践了完整流程：先在Photoshop中制作一个50×50像素、半透明的杂色PNG小图，然后通过在线工具将其转换为DataURI格式的字符串。在CSS中，只需为元素添加一个类（如.noise），将DataURI字符串设置为背景图，并配合伪元素与透明度属性，就能实现细腻的杂色覆盖，同时不影响内容显示。整个方案仅基于CSS2.1，兼容性良好。这种做法的优势非常明显：将图片直接编码进CSS文件，节省了网络请求；最终DataURI字符串可压缩至仅2.05KB左右，非常轻量；效果也易于通过调整原始图片来控制。文章最后指出，同样的原理也适用于生成纸张、石头等多种纹理，为前端实现视觉质感提供了灵活且高效的小技巧。

IT 累计浏览 4,943

2014网易前端开发笔试题笔记

这篇讲的是作者2014年参加网易前端开发校招笔试的真实经历与考题回顾。文章从收到临时通知的匆忙赶场开始，生动还原了考场外的见闻：来自不同高校的考生、不少“霸笔”同学，以及外包给智联招聘的笔试组织形式。核心部分聚焦于笔试本身。作者详细分享了两大板块的题目：第一部分是所有技术岗必考的计算机基础，涵盖文件组织、图遍历、无向图、可计算性、哈夫曼编码、死锁、数据库索引等经典问题，并附上了自己的解析。第二部分是前端开发专业题，题型包括不定项选择、填空、简答和编程题，重点考察JavaScript，例如要求手写闭包示例、阐述apply/call区别，并参照原型图实现交互页面。除了考题，作者还观察到招聘可能存在学校偏好，并指出广州考生流动性较低的现象。整篇文章既是一次笔试的详细记录，也为后来者提供了宝贵的复习参考和实战视角。

IT 累计浏览 8,009

程序员眼里IE浏览器是什么样的

这篇讲的是程序员如何用幽默解构曾经的浏览器霸主IE。文章没有做严肃的技术评测，而是收集了一系列广为流传的搞笑图片，从“反射弧有点长”到“如何区分HTML与HTML5”，再到不同浏览器的用户画像，用一个个生动的梗图勾勒出IE在程序员心中的形象——反应慢、兼容性差、总像没睡醒的“学渣”。这些看似戏谑的调侃，其实精准地指向了IE衰落的核心原因：在Web标准快速演进的时代，它固步自封，更新迟缓。文章以轻松的方式提醒我们，这些笑话不仅是吐槽，更反映了开发者们对一个开放、标准、高性能的Web环境的集体追求。

IT 累计浏览 4,643

关于z-index的那些事儿

这篇技术文章从一个经典的CSS谜题切入：如何在不修改HTML结构、不改动z-index与position属性的前提下，让设置了z-index:1的红色span反而堆叠到其他元素之下？作者通过揭晓答案——为父元素添加一个极小的opacity值（如.99）——引出了对z-index工作原理的深度剖析。文章的核心在于揭示“堆栈上下文”这一关键概念。作者指出，许多开发者误以为z-index只是简单的数值比较，而忽略了它受元素定位（position）和透明度（opacity）等属性的间接影响。当父元素因设置了opacity小于1而创建新的堆栈上下文时，其所有子元素（无论z-index值多高）都会被限制在这个新的层级范围内，无法突破到上层堆栈中。这就是谜题的解法，也是日常开发中z-index“失灵”的常见根因。文中进一步梳理了在同一个堆栈上下文中，元素从后到前的排列规则：包括负z-index值的定位元素、非定位元素、z-index为auto的定位元素，以及正z-index值的定位元素等。这些细节帮助开发者在构建复杂UI时，能更精准地预测和控制元素的层叠顺序，避免因误解规则而产生的布局困扰。

IT 累计浏览 7,210

如何成为一名优秀的web前端工程师（前端攻城师）？

作者开篇指出一个常见现象：许多前端程序员要么不断追问“如何学习”，要么轻视前端“就那么一点东西”，却很少有人思考如何成为一名优秀乃至卓越的前端工程师。这篇文章系统剖析了这个职业。它首先厘清了前端工程师的核心技能栈——HTML、CSS与JavaScript，但强调其知识体系远不止于此，还需涵盖性能优化、SEO、服务器端基础以及各种辅助工具与架构理念。作者坦言前端入门快但精通难，学习曲线是“先快后慢”，许多从业者易停留在“会用”的阶段，而琐碎的知识点和快速迭代的技术更增加了系统化成长的难度。文章的精华在于明确了优秀前端工程师的必备特质：既要具备知识的广度与深度，以应对从基础编码到复杂架构的全链条挑战；又必须拥有极快的学习速度，以跟上Web技术日新月异的变化。此外，沟通能力被提升到关键位置，因为前端工程师需要与产品经理、UI设计师、项目经理及最终用户等多方有效协作。文中引用了Yahoo工程师Nicholas C. Zakas的观点，称前端是计算机科学中最复杂的工种之一。最后，作者推荐了一份从入门到精通的JavaScript书单，如《JavaScript高级程序设计》、《JavaScript权威指南》以及《JavaScript Patterns》等，并指出要成为真正的优秀者，还需深入研究高性能网站构建、HTML5/CSS3乃至后端语言，道路虽艰辛，但方向清晰。

IT 累计浏览 2,017

合理设置响应式设计的响应点【译】

这篇讲的是如何为响应式设计设置合理的“响应点”。传统的做法要么依据流行设备尺寸，要么在布局“被打破”时才调整，但作者认为这缺乏根本依据。他主张回归内容可读性的经典理论：当一行文字的长度偏离了便于阅读的范围（如45至75个字符）时，就是设置响应点的合理时机。作者进一步考虑了语言、字体等实际因素。他举例说，同样是10个单词，用Verdana字体的德语宽度是38.5ems，而用Georgia字体的英语只有22ems，差异巨大。因此，响应点必须根据具体内容来定义，而不是一个固定数值。在实践中，文章演示了从一个小屏开始的过程：默认使用16px字号，确保内容区宽度不小于45字符。当屏幕宽度增加，内容区超过这个最佳范围时，就引入第二栏、第三栏，通过媒体查询改变布局。所有这些变化都是基于`em`单位计算，使得布局能弹性适应字体大小的变化。文章的最终结论是，一个健壮的响应式设计应当从内容出发，优先定义默认样式，然后让布局随着内容的“舒适度”自然生长，而不是生硬地适配某个具体的设备或尺寸。这种方法更具逻辑性，也更能适应未来的屏幕变化。

IT 累计浏览 2,756

IE10 CSS Hack（顺便聊聊IE11的CSS Hack）

这篇来自CSS88的文章，聚焦于开发者在实际项目中遇到的IE10 CSS兼容性难题。作者从同事反馈页面在IE10（甚至IE9）下出现异常的问题出发，系统梳理了针对IE10的CSS Hack方案。文章核心介绍了两种实用检测方法：一是利用IE私有的条件编译（@cc_on），结合条件注释，为IE10添加专属的class，从而编写隔离样式；二是通过JavaScript检测`document.documentMode`属性，动态判断IE版本。作者还分享了针对IE11预览版不支持@cc_on这一变化所作出的代码调整思路，体现了方案的延续性。文末附有不同模式下的效果截图和具体代码示例，为处理类似浏览器兼容性问题提供了清晰、可操作的实用思路。

IT 累计浏览 8,374

浏览器的渲染原理简介

这篇讲的是浏览器如何把代码变成屏幕上可见页面的全过程。作者从那篇著名的《How Browsers Work》出发，指出其虽好但过于冗长，且对日常工作的直接帮助有限。于是他提炼出了一个更精简、更实用的版本，目标是让读者在通勤或休息的碎片时间里就能读完，并立刻能用上。文章的核心是梳理浏览器渲染的几大步骤：解析HTML生成DOM树、解析CSS生成规则树，再由这两者构建出用于实际绘制的渲染树。作者特别拆解了DOM与CSS的解析逻辑，并点出CSS匹配的性能关键在于选择器的写法。最后，他重点区分了Reflow（重排）与Repaint（重绘）——前者因几何尺寸变化而成本高昂，在移动端尤其“痛苦”，后者则相对轻量。文章还直观地列出了哪些常见操作会触发高成本的Reflow，为前端性能优化提供了明确依据。整个叙述直白且紧扣实战，比如缓存DOM样式引用、理解`display:none`与`visibility:hidden`的不同影响等细节，都能帮助开发者更深入地理解页面性能问题的根源。

IT 累计浏览 2,488

开发者调试工具Chrome Workspace

这篇讲的是Chrome开发者工具中一个能直接提升前端调试效率的内置功能：Workspace。它允许开发者在DevTools里直接修改JS和CSS代码，并且改动会实时、自动地保存回本地文件。这省去了以往“在工具中调试确认效果，再切回编辑器手动同步修改”的重复步骤。过去实现类似自动保存需要依赖第三方工具（如autosave）并手动启动本地服务，现在Chrome正式版已原生支持，流程大大简化。文章详细说明了启用方法：对于普通Chrome用户，需先在`chrome://flags/`中启用开发者工具实验选项，重启DevTools后在设置的“Experiments”中开启“File system folders in Sources Panel”。出于安全考虑，还需在目标项目根目录下创建一个名为`.allow-devtools-edit`的空文件（文中提供了Windows和Mac的命令行创建方式），然后在Workspace中添加该目录即可开始使用。作者也提醒，若资源通过URL加载，需使用Mappings设置映射，并特别注意路径结尾不要加反斜杠。最后文章指出，尽管Workspace在调试阶段能有效提效，但其目前并不支持SCSS、LESS等预处理器文件的编辑，这是一个尚待完善的限制。

IT 累计浏览 6,394

如何成为一名优秀的前端工程师

这篇文章从“什么是优秀的前端工程师”这一核心问题出发，分享了作者对这一职业角色的深刻理解。作者认为，真正的优秀远不止于熟练使用jQuery或Bootstrap，而是能徒手实现功能、理解库背后机制，并在没有外援的情况下独立解决大多数任务。文章首先强调了扎实的技术基本功。它指出，合格的前端必须精通HTML、CSS与JavaScript，并对DOM结构、事件模型、盒模型等基础知识点达到“想都不用想”的程度。超越编码本身，优秀的前端还需学会一门后端语言，以更好地完成系统交互。其次，作者将沟通能力提到了与技术同等重要的位置。前端处于产品经理、UI设计师、项目经理和最终用户这四类角色的交汇点。优秀的前端需要像外交官一样，平衡各方需求，理解不同立场的关切，从而找到全局最优的解决方案，而非仅仅被动地执行“加个按钮”这样的指令。文章还强调了持续学习对前端工程师的必要性，Web技术日新月异，停止学习就意味着被淘汰。最后，文章附上了一份详尽的前端知识架构图谱，从浏览器兼容、编程语言到工具链、性能优化，为读者提供了一份清晰的自我提升路线参考。整体来看，这是一篇为前端从业者指明方向、描绘清晰成长画像的实用指南。

IT 累计浏览 3,462

CSS选择器

这篇讲的是CSS选择器的全面指南。作者从选择器的核心地位出发，系统地梳理了从基础到高级的各类选择器。文章首先列举了最简单的元素选择器，随后重点讲解了四类关键选择器：关系选择器（如后代、子、相邻兄弟选择器）精准定位元素间的层级与位置关系；属性选择器通过 [attr] 系列语法，能灵活匹配元素的任意属性值，无论是完全相等、前缀、后缀还是包含片段；伪类部分则覆盖了用户交互状态（如 :hover, :focus）、文档结构（如 :nth-child, :not）乃至表单验证（如 :valid, :invalid）等丰富场景；最后，伪元素（如 ::before, ::after, ::selection）展示了如何通过纯CSS为元素生成或修饰内容。文中每种选择器都配有清晰的代码示例，比如用 ul > li 仅选中直接子元素，或用 div[class^=a] 匹配类名以特定字母开头的容器。对于容易混淆的 :nth-child 与 :nth-of-type，作者也通过实例厘清了二者的区别——前者按绝对位置计数，后者则按同类型元素计数。这为前端开发者提供了即查即用的实用参考。