我要反馈问题

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

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

友情链接

猿说:互动氛围更好的IT交流学习平台

互动氛围更好的IT交流学习平台

立即访问
声享:制作精彩的有声幻灯片

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

立即体验

京ICP备17024260号

秋雨寒雪

在CSS中实现”Wrapper“最好的方式

307阅读 · 秋雨寒雪 2017-08-16翻译  
CSS

通常,在一个新HTML文档中,我们首先要写一个元素,用来包容页面中的所有其他内容。术语“wrapper”常用在此处。我们给这个元素增加一个类,用来封装页面中的其他可视元素。 我一直在努力寻找最好的实现方法。我曾在StackOverflow上发现一个相关的帖子,有超过2...

smartsrh

用 Sass 和 BEM 制作响应式时间线

957阅读 · smartsrh 2017-08-13翻译  
CSS

构建一个时间轴来学习响应式 CSS 是很有趣的,本文将探讨如何用 CSS 比较时髦的技术(包括 Sass 和 BEM)来制作一个时间轴。 如果对这些技术还不熟悉,不用担心因为本文讲得很细,读完后会有些基本了解。 链接是将要建立的时间轴,趁此机会也普及一下电影星球大战的...

kingyuu

CSS技巧之'text-justify'

1310阅读 · kingyuu 2017-08-10翻译  
CSS

CSS中,当text-align属性被赋值为justify时,text-justify属性经常被用来和text-align属性一起设置文本两端对齐的方式. p { text-align: justify; text-justify: inter-word;...

Doraemonls

CSS双关语--来自前端的小段子,你看得懂吗?

3388阅读 · Doraemonls 2017-08-09翻译  
CSS

CSS双关语 通常来说,我写的有关Web开发的文章都是严肃的。因为主要涉及到克服挑战,或者是教学之类的内容。不过,今天是周五了,经过了劳累的一周,我决定休息一下,发一些和以往不同的娱乐点的CSS的双关语开心一下。希望你和我一样喜欢这些双关语! 译者注:奥利弗·奎...

秋雨寒雪

仅使用CSS,带你创建一个漂亮的动画加载页面

782阅读 · 秋雨寒雪 2017-08-09翻译  
CSS

利用伪元素、关键帧动画,你将具有强大的创造力,本文就是一个例子。本例中,利用两者,就可以构建一个加载动画,无需任何JS代码和图片。 你会问“为什么” 首先,这是一篇关于CSS、伪元素、关键帧动画以及利用这些工具可实现哪些效果的文章。我不认为每个Web App都需要一...

众里寻他千百度

5个你可能不知道的CSS属性

1112阅读 · 众里寻他千百度 2017-08-08翻译  
CSS

每年都有新的CSS属性被标准化,并在主流浏览器中可用。 它们旨在使Web开发人员变得轻松,创造出新颖美丽的网站。 在这篇文章中,我将介绍5个相对较新的CSS属性,你可能从来没有听说过,我觉得很有趣。 本文的目的是给你一个概述,它们是什么,你可以使用哪些值,它们的使用场...

文蔺

font-display 的使用

444阅读 · 文蔺 2017-08-04翻译  
CSS

进行性能优化时,决定 Web Font 的加载行为是一项技术活。@font-face规则中新增了一个font-display声明,开发者可以根据 Web Font 的加载时间来决定如何渲染或降级处理。 字体渲染差异 有了 Web Font,开发者可以在项目中加入丰富的...

Athon

关键请求 | CSS-Tricks

1697阅读 · Athon 2017-08-03翻译  
CSS

网站服务看起来很简单:发送HTML,浏览器进行处理并加载资源,然后我们只要耐心的等页面渲染好即可。 但是你很少知道,整个过程背后发生了“很多”事情。 你有没有想过,浏览器“如何”知道应该加载哪些资源,并且以什么顺序来加载这些资源? 今天我们来看看如何利用资源优先...

36KrFE

CSS 进化论:从CSS,SASS,BEM,CSS Modules到Styled Components

721阅读 · 36KrFE 2017-08-03翻译  
CSS

自从有互联网以来,我们就需要给我们的网站设计样式,而CSS也一直存在并以自己的速度发展起来,这篇文章将会让您了解它。 首先,在什么是CSS上我们需要有相同的认识,我认为我们都同意CSS是一种用于描述用标记语言编写文档的演示文稿。 众所周知,虽然CSS早已沿途发展的越来...

cherryjin

表单验证第四部分: MailChimp订阅表单中的验证 | CSS-Tricks

363阅读 · cherryjin 2017-08-01翻译  
Form CSS JavaScript

这是 CSS-Tricks十周年 纪念日 ! 我们制作了 一些书呆子T恤,你可以购买它来支持这个网站 CSS-Tricks 搜索 主页 视频 年鉴 画廊 片段 论坛 新消息 工作 指南 商店 # 表单验证第四...

myvin

JavaScript 包管理的前世今生

660阅读 · myvin 2017-07-30翻译  
JavaScript NPM Yarn Webpack Node.js HTML CSS

和 Yarn 相比,npm 在缓存、集成度和扩展性方面表现如何呢?我们将在这篇文章中一辨分晓。 使用许可 如果将一个 JavaScript 开发者在 2005 年冰冻起来,然后在 2017 年的现在以某种神奇的方式将其解冻,那么 JavaScript 包的爆炸式繁荣...

Mcbai

为什么使用第三方表单验证库? | CSS-Tricks

298阅读 · Mcbai 2017-07-29翻译  
CSS Form

我们最近都把注意力放在Chris Ferdinandi发布的关于现代表单验证的文章上。文章在这。现在,各大浏览器都内嵌有不少处理表单验证的工具,包括通过设置HTML属性,通过JavaScript API能做的更多。Chris向我们展示了通过稍稍再多一点的工作,我们就...

耳机

如何使用 css3 transform 属性来变换背景图

321阅读 · 耳机 2017-07-28翻译  
CSS

ad: 想要成为一名 css3 专家吗?目前所有 SitePoint 付费会员可以免费下载由 Tiffany Brown 编写的 CSS Master,或者你也可以花 19$ 来获得这本书。 本文更新了一篇发布于 2012 年 9 月 27 日的文章。更新内容包含最...

Mcbai

组织CSS的方式 | CSS-Tricks

253阅读 · Mcbai 2017-07-24翻译  
CSS Modules

Ben Frain曾经说过,写css代码很容易,但是扩展和维护却很难。本文就介绍了一套方案来解决这个问题。 OOCSS OOCSS 意为面向对象的CSS。这种方法有两种主要 观点: 结构与设计分离 容器和内容分离 使用这套结构,开发者能得到可以在不同地方使...

摩诘

编写高效的 CSS 选择器 – CSS魔法 – CSS体系, 网页最佳表现, Harry Roberts

380阅读 · 摩诘 2017-07-22翻译  
CSS Selector

高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在Sky公司工作之时,所感兴趣的,关注已久的话题。 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也可以变得很低能。这很容易被忘记,尤其是当你意识到你会的太少,CS...

Yang

CSS不是魔法–免费代码营

394阅读 · Yang 2017-07-20翻译  
CSS

如果你是一个Web开发人员,很可能你不得不时不时地写一些CSS。 当你第一次看CSS的时候,它看起来很像微风。你在这里添加了一些边框,改变了一些颜色。JavaScript是前端开发的难点,对吗? 在你作为一个Web开发人员前进的过程中,这改变了!更糟糕的是,前端社区...

mixj93

CSS 的五大里程碑

407阅读 · mixj93 2017-07-19翻译  
CSS

去年的十二月,CSS 已经20岁了。W3C 亲自宣布了这一消息,Alec Rojas 也整理了一些重点。 我发现我也可以加入讨论,聚焦上一个10年,这10年也正是 CSS-Tricks 的年龄。这正好与我在这个行业的工作经验相符。 Firebug 毫无疑问的是,Fir...

liuhui_is_me

Sass 基础: Sass Mixin 指令

312阅读 · liuhui_is_me 2017-07-17翻译  
CSS Saas Mixins Directive

为深入而简明的了解SASS,SitePoint为其所有高级会员提供SASS这本书籍,来自sass支持者Hugo Giraudel。或者,你也可以只花19美元就能买到一本。 本文首先出现在SitePoint 在2015年,在此出现在2017年6月14日并做了以下一些...

lunasun

CSS vs. JavaScript: 相信 vs. 控制 | Christian Heilmann

1922阅读 · lunasun 2017-07-14翻译  
Web CSS

当阿姆斯特丹的GotoConf要求我发言时,我以为这将是另一场机器学习或Progressive Web Apps的发言。但是,组织者要求我涉及CSS,这一在他们的“编程语言”中被低估的语言。说起来我从最开始就一直是CSS的粉丝。但我觉得一个硬核的开发会议参与者并不会对...

myvin

文本锁定 | CSS-Tricks

575阅读 · myvin 2017-07-09翻译  
SVG CSS

SVG 提供了 <tspan> 标签。尽管这个标签的功能类似于 HTML 的 <span> 标签,但是可以通过设置多个属性来解锁强大的文字变形功能。 <svg viewBox="0 0 100 100">...

camiler

响应式导航模式概述 – Smashing Magazine

426阅读 · camiler 2017-07-07翻译  
Web HTML CSS JavaScript

说响应式web设计改变了我们的行业顶多是一句轻描淡写。过去我们经常会询问客户希望我们支持哪种设备和分辨率,但现在我们知道是“尽可能多的”。为了应对这样的挑战,并处理我们日益复杂的世界,web行业已经爆发出了新的思维,模式和方法。 在这篇文章中,我想主要看一下响应式导航...

壮壮

如何用JavaScript捕获CSS3的动画事件

432阅读 · 壮壮 2017-07-07翻译  
Animation CSS

CSS3动画执行起来平滑且快速,但不像JavaScript动画,你可以一帧一帧控制。幸运的是,你可以在任何一个元素上使用事件处理来决定动画的状态。同时它支持连续播放不同动画这种细粒度的控制。 来看下这个简单的CSS3动画: #anim.enable { -webk...

QAQMiao

CSS中字体相关的小技巧

1199阅读 · QAQMiao 2017-07-07翻译  
CSS UI

你是否早已厌倦了司空见惯的Helvetica字体?想让你的网页别有一番趣味?或是想避免和同事讨论这些琐事?那么我想你需要看看下面这些代码。在项目中添加这样一小块代码后,将在全局中将Helvetica字体替换(alias)为Comic Sans MS字体(或是Chalk...

Nero0

Webpack入门指南: 入口,输出,加载器和插件 | CSS-Tricks

620阅读 · Nero0 2017-07-04翻译  
Web CSS

前端开发已经变成模块化的方式,代码的封装和结构也响应的提高了。工程化变成每一个项目非常关键的一部分,关于前端工程化的选择也非常的多。 这几年Webpack获得了很高的人气,因为它强大的功能和可扩展性,但是有一些开发者觉得在编写配置文件的时候感觉疑惑,较难去适应we...

Doraemonls

论CSS中可使用的font-size的长度单位

365阅读 · Doraemonls 2017-07-02翻译  
Web CSS

本文由Tom Hodgins审阅。感谢SitePointer的编审们,帮助SitePoint提供最优质的内容给读者! CSS给开发者提供了许多种长度单位,用于各种不同的CSS属性,如margin,padding,line-height还有font-size。为了满足...

liuhui_is_me

了解CSS3位移时间属性

769阅读 · liuhui_is_me 2017-06-28翻译  
Web CSS

朋友们,现在你要保持冷静,因为错综复杂的非常有趣的CSS时间函数将会带你体验美妙的时刻 好的,所以这篇文章的主题可能没有在你的血液中,但除了所有的玩笑外,时间函数是一个隐藏的宝石当谈到CSS动画,你可以很惊讶的是你能做多少。 SmashingMag上更多的推荐阅读...

junerzyz

CSS Grid –“表格”布局回来了,不见不散.  |  Web  |  Google Developers

598阅读 · junerzyz 2017-06-28翻译  
Web CSS

TL;DR: 如果你熟悉Flexbox, Grid对你来说也不会陌生。 Rachel Andrew 的一个网站 website dedicated to CSS Grid 可以帮助你入门, Grid现在在Google Chrome已经得到了支持。 Flexbox?...

lizheming

CSS Animations vs Web Animations API

856阅读 · lizheming 2017-06-25翻译  
Web CSS

Web Animation API 是JavaScript 原生提供的的动画操作 API,本文我们会缩写为 WAAPI。具体内容可以查看MDN,Dan Wilson 也写了一系列教程推荐大家看看。 本文中我们会比较 WAAPI 和 CSS3 Animation 的异同...

chechengpeng

在 Vue.js 中使用Mixin —— CSS-Tricks

1594阅读 · chechengpeng 2017-06-24翻译  
Web CSS JavaScript

有一种很常见的情况:有两个非常相似的组件,它们共享同样的基本函数,并且它们之间也有足够的不同,这时你站在了一个十字路口:我是把它拆分成两个不同的组件?还是只使用一个组件,创建足够的属性来改变不同的情况。 这些解决方案都不够完美:如果你拆分成两个组件,你就不得不冒着如果...

xiaomu

快来围观BEM方法论

1575阅读 · xiaomu 2017-06-22翻译  
Web CSS

常见问答 为什么BEM? BEM和OOCSS, AMCSS, SMACSS, SUITCSS有什么区别? BEM和Web Components有什么区别? BEM和Bootstrap有什么区别? 块和元素 我应该创建一个块还是一个元素? 如何正确修改页面中每个块...

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