现代 CSS

译文

使用字符串(STRINGS)设置样式

今年在墨尔本(澳大利亚)举办的CSSConf中,我有一个主题需要演讲——"Styling With STRINGS"。该讲座主要介绍的是在组件中如何使用FlexboxcurrentColorem,在浏览器中快速实现Web应用程序所需要的风格。其实这篇文章更是向大家介绍了如何通过修改一个属性就能修改整个组件的大小、颜色。并且简单介绍了如何让你把修改好的文件能直接放置在你的本地目录中。虽然描述短小,但涉及的知识点还是蛮有意思的,希望这篇译文能对你今后的工作略有帮助。

Srcset和sizes

四年前,ETHAN MARCOTTE发布了一篇文章(《Responsive Web Design》)之后的第13天,Steve Jobs发布了iPhone,突然有了流体视网膜(Retina)图像一说;也突然有了相关争论。我们面对实现流体图片又名视网膜又名响应式图片的第一反应就是使用制作响应式布局的工具:媒体查询!浏览器无法知道它加载的网页是什么,但他可以意识到他们的渲染环境,比如说视窗大小,用户屏幕的分辨率等诸如此类的事情。

使用CSS3 Gradients创建图片占位符

图片占位符,我们最常用的方案就是留空白区域,或者使用空的div标签来模拟,甚至使用一张背景图片来做。但这些方案都不是一个完美的方案,那么什么是完美的方案呢?今天我们通过CSS3的渐变来实现图像的占位符功能,这种方案既让你的代码更为干净,而且还可以帮你减少HTTP的请求数。最后还通过使用Sass让你实现自动化功能。感兴趣的同学请点击阅读正文。

《Sass for Web Designers》之Sass和媒体查询

在这本书中,我想要把主要精力都集中在讲解Sass的基础使用,和证明Sass并不会和你的工作流程脱节。但在最后一章中,我想讨论一些使用Sass结合媒体查询的高级技术和一些我每天工作中用到的将复杂CSS简化的例子。只要你能想到的,Sass就可以办到。使用变量和一些mixin会让你的生活变得更轻松。如果你想的话,Sass完全不局限于这些简单的功能。下面这个例子再一次举重若轻的展示了Sass的建立兼容高清屏幕的响应式网站。

《Sass for Web Designers》之Sass的用法

在这一章中,我将分享在我项目中每天使用到的一些Sass的特性。我还特别为这本书建立了一个虚拟项目来保证我们谈论的Sass的功能是在一个真实环境中进行的。这个项目就叫做Sasquatch Records–一个很简单的专注于神话,晦涩难懂的,牲畜类等超自然音乐风格的唱片公司网站。

《Sass for Web Designers》之Sass的工作流程

现在我们知道了什么是Sass,那我们就开始使用它来创建样式吧。我们的第一个任务就是在你的电脑上安装Sass。我在第一章提到过Sass是用Ruby编写的程序,并且使用Ruby来编译成CSS。所以,在我们使用Sass之前,我们需要安装Ruby。

《Sass for Web Designers》之为什么要使用Sass

我不信任Sass。我从来都是手写样式表的!我不需要额外的工具来帮助我简化工作。我不想要把复杂的事物添加到我的工作流程中,不要来烦我。无论是以上哪种想法,现实是Sass(和其他的CSS预处理器)可以成为一个强有力的助手,一个任何样式书写者都可以轻松把它插入到每日的工作中去的工具。在使用了Sass一段时间后回过头来看,我很庆幸自己这么做了。我想要分享我是怎么来使用Sass来提高效率的,比我前10年维护CSS的过程要轻松许多,这就是我想要写这本书的理由。最初,由于我对Sass有一些误解导致了我放弃了它。我担心我要完全改变我书写和管理CSS的方法。有时,CSS也是很脆弱的,作者想要保护他们的作品不被轻易复制是可以理解。我能得到保佑吗?阿门。

《Sass for Web Designers》之前言

回顾计算机语言的进化史,似乎每隔几年都会诞生一个新的概念以推进计算机语言的发展。从二进制升级到指令集,指令集再升级为编译语言。基于这些不断进化的编译语言,我们又创造出了web浏览器。像HTML,CSS和JavaScript这些语言都是通过浏览器来渲染的。现在,我们再次升级这个概念的时刻来临了。

在HTML中使用meta标签的基础知识和最佳实践

元数据通常被理解为‘描述数据的数据’,在web页面中的用途之一就是使用<meta>标签。meta标签的内容一般都是表示关于HTML页面的信息,其作用是不可以被其它标签取代的。另外,meta标签还可以模拟一个HTTP响应头部(例如重定向到不同页面),同时,它还拥有像http-equivcharset这样的属性 ,在Mozilla开发者社区中有对元数据详细的文档说明。

viewports剖析

在这个迷你系列的文章里,我将解释viewports和多种重要的HTML标签元素的宽度是如何工作的,例如<html>标签。同样也会解释window和screen的宽度问题。第一部分主要关于桌面(pc)浏览器,基本目的在于为移动端(mobile)浏览器上,本话题的讨论创建舞台。绝大多数web开发人员已经对pc的概念有了直观的认识。mobile拥有相同的概念,但是更加复杂。如你所知,一个友好的预热将极大的帮助你理解mobile浏览器。

页面

返回顶部