我要反馈问题

加入众成翻译官方交流群(群号:362419683)

关注《奇舞周刊》微信号
阅读更多精选前端技术文章

友情链接

声享:制作精彩的有声幻灯片

使用声享在线PPT快速制作分享优质内容

立即体验

京ICP备17024260号

蜗牛上树

【React】Webpack入门 以及 css模块化

144阅读 · 蜗牛上树 2017-05-23翻译  
CSS CSS Modules React

这是讲CSS模块化系列文章的最后一篇,我将探索如何通过Webpack来建一个静态的React网站。这个静态网站将包含模板:一个主页和一个包含几个React组件的页面。我们来看看他们是怎么运作的。 系列文章 第一篇: 什么是css模块化以及我们为什么需要模块化?...

sammffl

是时候使用CSS自定义属性了 – Smashing Magazine

249阅读 · sammffl 2017-05-15翻译  
Web CSS

在今天,css预加载已经成为了前端开发的一个标准。预加载的一个主要优势就是可以让你使用变量。它可以让你避免复制黏贴你的代码,并且简化了开发和重构。 我们用预加载来存储颜色、字体偏好,布局的细节——几乎是我们在css里面用到的所有东西。 但是预加载的变量有一些使用上的限...

印前

CSS3 Flexbox属性视觉指南 | Scotch

538阅读 · 印前 2017-04-14翻译  
Web CSS

JavaScript语言正值火热之期。用它来构建一个适用所有平台的应用程序吧,包括Web网站,服务端,移动端以及桌面端。 入门 代码 示例 弹性盒布局官方称作CSS弹性盒布局模块(CSS Flexible Box Layout Module),这是一种新的css3布...

Doraemonls

深入理解CSS:font metrics, line-height 以及 vertical-align

1709阅读 · Doraemonls 2017-04-07翻译  
Web CSS

Line-height 和 vertical-align 是比较简单的CSS属性,以至于我们大多数人都觉得完全理解这两个属性是如何工作以及如何使用它们。实际并非如此。这两个属性非常复杂,也许可以说是最难理解的属性了。CSS有一个鲜为人知的特性:内联元素格式化。这两者恰...

cherryvenus

Flexbox的正确使用方法:混合新老语法,以获得浏览器最佳的支持 | CSS-Tricks

388阅读 · cherryvenus 2017-03-30翻译  
Web CSS

Flexbox十分赞,并且毫无疑问是未来布局的一部分。这语法在过去几年已经改变了很多,因此存在“旧”和“新”的语法。但是如果我们将新,老,以及介于两者之间的语法,交织在一起,我们就能够获得优雅的浏览器支持。特别是对于一个简单而且通用的使用案例:顺序控制网格。 HTML...

印前

设计系统里的动画 ◆ 24 ways

210阅读 · 印前 2017-03-16翻译  
Web CSS

现代的前端工作流已经成熟,包括设计系统以及组件库,它们帮助我们保持组织有序,改进工作流,简化维护。这些系统在执行良好时,能确保可用代码的正确记录,使我们的系统能够缩减通信冲突。 但是,尽管大多数这些系统在文字,颜色,常规构建块时采取关键立场,但是他们对动画的处理仍是无...

哈呼哈哈呼

CSS 网格布局工作草案中的点滴

250阅读 · 哈呼哈哈呼 2017-02-16翻译  
CSS Chrome DOM

网格布局规范给我们提供了一种新的布局方式,这种布局方式对现代web设计来说,更加灵活,更加适合当今web规范的发展。在今天这个web时代,随着规范的发展,最新的网格布局模块草案也有新的变化。 这篇文章,我希望通过简要地关注所有的变化来帮助大家了解最新的发展。 如果你...

verymuch

CSS通用数据类型

1103阅读 · verymuch 2017-02-15翻译  
Web CSS

CSS中属性的值有着许多种格式。为了让用户代理(即浏览器)能够识别一个值是否有效,则需要确认该值是否符合该类值支持的格式的其中一种。这些属性值所支持的格式叫做数据类型,在规范中用<this>的形式标识。 CSS中存在两种数据类型——特定数据类型和通用数据类...

网络埋伏纪事

理解弹性盒:必知必会

1352阅读 · 网络埋伏纪事 2017-02-14翻译  
Web CSS

本文将涵盖玩转 CSS 弹性盒模型所需的所有基本概念。文章有点长,请做好准备。 如果你更愿意在一个 PDF 文档中阅读整个教程,这里是下载链接 - 随便下,没有附加条件。 关于弹性盒学习曲线的备注 如下是我很尊重的一个开发者 Philip Roberts 发的一个推...

山月

calc() 如何工作

465阅读 · 山月 2017-02-13翻译  
Web CSS

CSS3 的 calc() 函数允许我们在属性值中执行数学操作。例如,我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。 .foo { width: calc(100px + 50px); } 为什么是 calc() 如果你使用过 CSS 预...

山月

Grid 布局完全指南 | CSS-Tricks

776阅读 · 山月 2017-02-09翻译  
CSS

简介 CSS 栅格布局 (亦称 "Grid"),是一个基于栅格的二维布局系统,旨在彻底改变基于网格用户界面的设计。CSS 一直以来并没有把布局做的足够好。刚开始,我们使用 tables,后来是 floats,positioning 和 inlin...

junerzyz

通过例子来对比Debouncing,Throttling,requestAnimationFrame | CSS-Tricks

313阅读 · junerzyz 2017-02-07翻译  
CSS

以下这篇文章分享自 David Corbacho,伦敦的一名前端开发工程师. 我们曾经分享过 关于Debouncing,Throttling这两个概念的一篇文章,但是这次的分享,David将通过几个交互例子来深入其概念,让读者更加清楚。 Debounce and th...

zxhycxq

2016 JavaScript 后起之秀

946阅读 · zxhycxq 2017-02-03翻译  
Web CSS JavaScript

【译者注:】因格式问题,图片相关的内容,请参照英文原文:https://risingstars2016.js.org/ JavaScript 社区在创新方面全速前进,几个月后,曾经的趋势就会过时。 2016 已经结束了,你可能会想自己错过了一些重要的东西?别担心,我们...

Icarus

从sass到PostCSS

777阅读 · Icarus 2017-01-27翻译  
CSS

原文链接:https://tylergaw.com/articles/sass-to-postcss 译者:Icarus 邮箱:xdlrt0111@163.com 多年来我一直使用Sass.但是最近我想要使用PostCSS和它的cssnext插件来尝试处理样式.我...

Mmzer

CSS中的随机数 | CSS技巧

928阅读 · Mmzer 2017-01-20翻译  
Web CSS

最近,我误打误撞的遇到一个有趣的问题。我想要随机的去设置animation-duration的值。 这是一个非随机的例子: 看这个Robin Rendle (@robinrendle)在CodePen上的例子CSS随机数#1。 这是我用CSS写的一个动画: @key...

dainiel

2017年要学习的3个CSS新特性

456阅读 · dainiel 2017-01-18翻译  
CSS

新年快乐! 🎊 随着新一年的到来,我们可以学习的干活又多了好多。新特性虽然有很多,但有三个是今年最让我激动不已的。 1. Feature Queries 译者注:因为media query一样,大家习惯不翻译,所以这里也不直译为:特性查询 之前我写过了一篇关于F...

winar_阿进

关于渐进增强方法的实例研究:“Building Social”

262阅读 · winar_阿进 2017-01-12翻译  
JavaScript CSS HTML

我们曾激烈讨论过渐进增强的方法以及它是如何提升网站的向下兼容性的。但是怎么样才能将渐进增强的概念应用在一个实际的项目中呢?当我们为网站设计一个复杂的交互效果时,我们很难决定哪些效果仅仅采用HTML和CSS就可以实现,而哪些效果则必须使用JavaScript。 本文我们...

踏歌

SUIT CSS 简介 - 网页设计周刊

267阅读 · 踏歌 2017-01-07翻译  
Web CSS

我们作为开发人员面临的一个令人生畏的问题是“我将如何在项目中结构化一些东西?”作为一个框架,SUIT CSS提供了一个架构的实现,其他人可以使用它来作为应用开发的基础。 把它看成是解决混乱结构的最佳方式,减少css在执行往往缺少设计原则时的恐惧和无助(相比于其他像Ja...

wenkai

深入理解 React 高阶组件

588阅读 · wenkai 2017-01-04翻译  
React Redux CSS

摘要 这篇文章主要面向想要使用 HOC(Higher Order Component,高阶组件) 模式的进阶开发者。如果你是 React 新手,建议你从阅读 React 的文档开始。 高阶组件是一种很好的模式,很多 React 库已经证明了其价值。这篇文章中我们将会详...

winar_阿进

用BEM写出更具有可维护性的CSS

938阅读 · winar_阿进 2017-01-04翻译  
CSS

介绍 BEM: Block, Element, Modifier 举例 为什么最终BEM战胜了其他? 总结 介绍 这篇文章教你一种方法,能够写出更具有可维护性的CSS,他就是"BEM"。 更新: @necolas 在推特上写了一个令人深思的评论...

jacty

Eric的归档博文:CSS Grid!

483阅读 · jacty 2016-12-29翻译  
CSS

Grid布局来了,Grid布局来了。千真万确,各大浏览器将发布对Grid布局的支持。唔哈哈哈哈~ 什么?什么?什么?你说什么? 2017年3月,Chrome和Firefox将开始默认支持Grid布局。其中,Mozilla将在3月7日发布的Firefox 52版本上开始...

winar_阿进

被人遗忘了的打印样式表

367阅读 · winar_阿进 2016-12-27翻译  
Web CSS

Aaron Gustafson指出当他在打印某一个页面的时候,原本有序的界面也变得杂乱不堪,也因此向Indiegogo发送了一篇微博。 当我看到这个消息的时候真的感到震惊,我忽然意识到已经有很长的时间没有优化一个页面的打印样式了,甚至都没有在页面的检查上花过心思。...

印前

百分百正确设置CSS断点的方法

1373阅读 · 印前 2016-12-26翻译  
CSS

接下来近一分钟里,我希望你暂且将CSS、web开发、数字化用户界面抛之脑后。 接着,我想让你畅想时光回退,回到年少时,回到上学第一天。 那时的你更简单,只担心画没画好图形,有没有尿裤子。 现在,看看上图中的点,注意有些点是怎样聚在一起的,有些点又是怎样分开的?我想让...

踏歌

css变量之条件语句

544阅读 · 踏歌 2016-12-25翻译  
CSS

本文原文地址http://kizu.ru/en/fun/conditions-for-css-variables/ 如有翻译不当之处,请指出。 我将从这个开始:规范中没有(有一个css条件规则的模块,但是别期待它能覆盖css变量-它涵盖了一些规则的东西。这里还有一个关...

wenliangdai

使用 Flexbox 的最佳时间到来了吗?– Martin Defatte – Medium

615阅读 · wenliangdai 2016-12-21翻译  
Web CSS

作为一个前端开发者,我时常问会自己:“哇,这个新技术好酷。我可以在实际生产环境中的工作流里使用它吗,亦或者它会不会只是理论上比实际中要好?”我发现自己总是在评估新的 CSS 规范来看它是否可以让我的设计更出色,并且让我的代码更加简洁且易于管理。 FLEXBOX 对于响...

萧暮

关于 Angular 2 那些让我兴奋的东西

1725阅读 · 萧暮 2016-12-19翻译  
CSS JavaScript TypeScript

在过去的半年里,我花了大量时间玩 Angular 2。创建了一些有趣的项目和与之相关的讨论,写了若干文档并和其他小伙伴讨论他们正在做的事。然后我还写了一系列文章。我觉得现在是时候总结和分享我在这个平台上发现的有趣的东西了。 TypeScript 在 Angular 社...

XYZ

CSS技巧-rgba函数的妙用

845阅读 · XYZ 2016-12-19翻译  
Web CSS

新出现的 CSS 颜色配置函数是一项非常有意思的功能,它给予我们在浏览器中直接操纵颜色的能力。例如,当鼠标悬停在按钮上时,可以使用color: color(black darkness(50%))改变颜色,而不需要使用 Sass 这类 CSS 预处理器。 但是浏览器现...

远杨

构建稳固的、可升缩的CSS框架的八大原则

2658阅读 · 远杨 2016-12-17翻译  
CSS Web UI

构建稳固的、可升缩的CSS框架的八大原则 这些原则都是我从这些年工作中所含盖的各个大型、复杂的web项目中总结出来的。而这些事情也都是我这些年被多次问到的,所以觉得将其用文档的形式叙述出来会是个不错的想法。 我会尝试着尽量缩短我的解释,以下是关键词: 善用类来定义C...

qhxin

Virtual CSS 和 Styletron

844阅读 · qhxin 2016-12-17翻译  
Web CSS

Styletron 是一个为了高性能而建立的 CSS-in-JS 的库,旨在运行得尽可能的快,同时尽可能小的输出 CSS。 大部分 CSS-in-JS 库将 JS 对象包含样式声明为相应的 CSS 类并使用生成的散列作为类名1。总的来说,这一过程运行良好,解决了大多数...

兔兔的奶爸

MaintainableCSS - 一种编写模块化,可扩展和可维护的CSS的方法(作者:Adam Silver):模块

396阅读 · 兔兔的奶爸 2016-12-11翻译  
CSS Product HTML

模块 什么是模块? 模块是不同的、相对独立的单元,它可以与其它的模块组合以构成一个更复杂的结构。 在客厅,你可以认为电视、沙发和墙是模块。他们组合到一起创造了一个可用的客厅。 如果你带走它们其中的一个,剩余的依然可以很好的工作。就像我不需要电视也可以坐在沙发上一样。...

玩命加载中……
已经到底啦