CSS 的未来www.2003.com

2019-05-01 作者:计算机教程   |   浏览(90)

旧方法

不使用CSS变量确实可以做到同样的效果,但这样会增加许多不必要的代码,因为上面大部分修改都需要将声明在媒体查询中重写一遍。就像下面这样:

@media all and (max-width: 450px) { navbar { margin: 15px 0; } navbar a { font-size: 20px; } h1 { font-size: 20px; } .grid { margin: 15px 0; grid-template-columns: 200px; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@media all and (max-width: 450px) {
  
  navbar {
    margin: 15px 0;
  }
  
  navbar a {
    font-size: 20px;
  }
 
  h1 {
    font-size: 20px;
  }
  
  .grid {
    margin: 15px 0;
    grid-template-columns: 200px;
  }
}
2.限制媒体查询范围

以前如果我们想实现一个限制媒体查询的范围也许是这样的:

CSS

@media (min-width: 320px) and (max-width: 640px) { body{ background-color:red; } }

1
2
3
4
5
@media (min-width: 320px) and (max-width: 640px) {
  body{
    background-color:red;
  }
}

以上我们限制屏幕的宽在320到640之间时让页面背景变成红色,但现在我们可以这样:

CSS

@media (width >= 320px) and (width <= 640px) { body{ background-color:red; } }

1
2
3
4
5
@media (width >= 320px) and (width <= 640px) {
  body{
    background-color:red;
  }
}

是不是更加一目了然了,当然它还可以结合@custom-media来使用,如下:

CSS

@custom-media --noly-mobile (width >= 320px) and (width <= 640px); @media (--noly-mobile) { body{ background-color:red; } }

1
2
3
4
5
6
7
@custom-media --noly-mobile (width >= 320px) and (width <= 640px);
 
@media (--noly-mobile) {
  body{
    background-color:red;
  }
}

新的方法

现在让我们看看使用CSS变量是如何起作用的。首先,我们要声明需要更改或复用的变量:

:root { --base-font-size: 30px; --columns: 200px 200px; --base-margin: 30px; }

1
2
3
4
5
:root {
  --base-font-size: 30px;
  --columns: 200px 200px;
  --base-margin: 30px;
}

然后,我们只需要在app中使用它们就可以了。非常简单:

#navbar { margin: var(--base-margin) 0; } #navbar a { font-size: var(--base-font-size); } h1 { font-size: var(--base-font-size); } .grid { margin: var(--base-margin) 0; grid-template-columns: var(--columns); }

1
2
3
4
5
6
7
8
9
10
11
12
13
#navbar {
  margin: var(--base-margin) 0;
}
#navbar a {
  font-size: var(--base-font-size);
}
h1 {
  font-size: var(--base-font-size);
}
.grid {
  margin: var(--base-margin) 0;
  grid-template-columns: var(--columns);
}

之后,我们可以在媒体查询中修改这些变量值:

@media all and (max-width: 450px) { :root { --columns: 200px; --base-margin: 15px; --base-font-size: 20px; }

1
2
3
4
5
6
@media all and (max-width: 450px) {
  :root {
    --columns: 200px;
    --base-margin: 15px;
    --base-font-size: 20px;
}

这样的代码是不是比之前要简洁多了?我们只需要专注于:root选择器就可以了。

我们将媒体查询中的4个声明减少到了1个,代码也从13行减少到了4行。

当然,这只是一个简单的例子。想象一下,在一个大中型网站中,有一个--base-margin变量控制着所有的外边距。当你想要在媒体查询时修改属性,并不需要用复杂的声明填充整个媒体查询,只是简简单单地修改这个变量值就可以了。

www.2003.com,总之,CSS变量可以定义为未来的响应式。如果你想要学习更多的知识,我推荐你看我的免费教程。用不了多久你就能成为一个CSS变量大师。

查看更多我翻译的Medium文章请访问:
项目地址:https://github.com/WhiteYin/translation

1 赞 2 收藏 评论

www.2003.com 1

CSS的未来

在未来的CSS中将会支持更多的属性以及函数,其中不乏有变量,嵌套,值计算等,这一章我们将会讲解它们。

注意:因为本节内容大部分需要CSS未来版本才支持,所以你的浏览器可能不一定有效果,不过有一个插件(cssnext)可以解决这个问题,关于这个插件的使用请到本节的最后一节中查看。

CSS 变量让你轻松制作响应式网页

2018/03/07 · CSS · 响应式

原文出处: Per Harald Borgen   译文出处:白吟灵   

www.2003.com 2

如果你之前没有听说过CSS变量,那么现在我将告诉你:它是CSS的新特性,让你能够在样式表中使用变量的能力,并且无需任何配置。
实际上,CSS变量能够让你改变以往设置样式的老方法:

h1{ font-size:30px; } navbar > a { font-size:30px; }

1
2
3
4
5
6
h1{
    font-size:30px;
}
navbar > a {
    font-size:30px;
}

而使用了CSS变量之后:

:root { --base-font-size: 30px; } h1 { font-size: var(--base-font-size); } navbar > a { font-size: var(--base-font-size); }

1
2
3
4
5
6
7
8
9
:root {
  --base-font-size: 30px;
}
h1 {
  font-size: var(--base-font-size);
}
navbar > a {
  font-size: var(--base-font-size);
}

这样的词法有点奇怪,但它确实能够让你通过仅改变--base-font-size的值来改变app中所有原生的字体大小。

如果你想要学习CSS变量的知识,可以登录Scrimba看我的视频课程,或是阅读我在Medium上写的文章:如何学习CSS变量

好了,现在让我们看看如何使用这个新知识来更加简单地制作响应式站点吧。

初始值

我们知道一个div默认是块元素,那么如果你不想它默认变成块元素可以通过initial将它设置成初始值。如下:

CSS

div { display: initial; }

1
2
3
div {
  display: initial;
}

我才是真正的DIV,T_T

我才是真正的DIV,T_T

效果如图13.18所示

www.2003.com 3

图13.18 初始值

这里它之所以在一排了,是因为display的初始值就是inline,而为什么不将divdisplay设置成initial它默认是block是因为浏览器给div设置了默认样式,也就是说initial可以去掉浏览器默认样式。

如果你想去掉一个元素中的所有浏览器默认样式,可以这样:

CSS

div{ all:initial; }

1
2
3
div{
  all:initial;
}

但不是特别建议你这样,最好还是根据需求来。

初始配置

让我们来把下面这个页面变成响应式的吧:www.2003.com 4

这个页面在PC端看上去很不错,不过你可以看到它在移动端的表现并不好。就像下面这样:
www.2003.com 5

在下面这张图中,我们在样式上做了一些改进,让它看起来更好一点:

  1. 重新排列整个网格布局,使用垂直排列取代固定两列布局。
  2. 将框架整体上移了一点。
  3. 对字体进行了缩放 。

www.2003.com 6

目光转到CSS代码中,下面是我们要修改的代码:

h1 { font-size: 30px; } #navbar { margin: 30px 0; } #navbar a { font-size: 30px; } .grid { margin: 30px 0; grid-template-columns: 200px 200px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
h1 {
  font-size: 30px;
}
#navbar {
  margin: 30px 0;
}
#navbar a {
  font-size: 30px;
}
.grid {
  margin: 30px 0;
  grid-template-columns: 200px 200px;
}

更具体地说,我们需要在一个媒体查询中做出以下调整:

  • 将h1的字体调整为20px;
  • 减少#navbar的上外边距为15px;
  • 将#navbar的字体大小减少到20px;
  • 减少.grid的外边距为15px;
  • 将.grid从两列布局变为单列布局。

注意:样式表里不仅仅是这些CSS声明,但是在这篇教程中我跳过它们,因为媒体查询并不影响它们的设置。你可以在这里获取完整的代码。

颜色函数

颜色函数通过color使用,如下:

CSS

body{ background-color:color(pink a(30%)); }

1
2
3
body{
  background-color:color(pink a(30%));
}

这段代码的意思是说给body添加了一个背景为pink的颜色并且透明度为30%,和下面这段代码一样:

CSS

body{ background-color:rgba(255, 192, 203, 0.3); }

1
2
3
body{
  background-color:rgba(255, 192, 203, 0.3);
}

当然你也可以使用其它的颜色表示法,如:

CSS

body{ background-color:color(#666 a(30%)); }

1
2
3
body{
  background-color:color(#666 a(30%));
}

这个还是比较方便的。

更多这方面的功能可以到https://drafts.csswg.org/css-color/#modifying-colors中查看。

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

www.2003.com 7 www.2003.com 8

1 赞 2 收藏 评论

2.CSS变量的意义

如果你使用过一些编程语言,你不会忘记变量是多么的重要,如在Javascript中,我们经常会写这样一段代码:

JavaScript

var oBox = document.getElementById('box'); oBox.style.width = '100px'; oBox.style.height = '100px'; oBox.style.backgroundColor = 'red';

1
2
3
4
var oBox = document.getElementById('box');
oBox.style.width = '100px';
oBox.style.height = '100px';
oBox.style.backgroundColor = 'red';

在这段代码中我们通过oBox变量来引用.box元素,在下次的使用中就不需要重新去获取这个元素了,这样给我们带来了很大的便利。在CSS中变量也同样重要,不然你让LessSass等预处理情何以堪,正是因为它们支持在CSS中像编程语言一样编程,所以在之前的很长一段时间里它们是那样的让人着迷。在CSS中合理的使用变量,可以减轻不少的工作,以及可维护性。比如一个网站的主调色,它们基本都是固定的,那么我们完全可以使用变量来储存它们,另外一点就是当网站改版时,如果网站主调色改变时我们只需要改变相应的变量即可,这或许就是变量的最大好处吧。从另一个角度来讲使用变量的另一个好处就是,具有一致性,比如页面中所有元素的字体大小都是引用的同一个变量,那么当我们改变这个变量时,其他元素的字体大小都会相应的改变,我们来看一下,下面这段代码:

CSS

:root{ --main-size:12px; } .box{ font-size:var(--main-size); } .box2{ font-size:var(--main-size); } .box3{ font-size:var(--main-size); } @media screen and (min-width:600px){ :root{ --main-size:16px; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
:root{
  --main-size:12px;
}
.box{
  font-size:var(--main-size);
}
.box2{
  font-size:var(--main-size);
}
.box3{
  font-size:var(--main-size);
}
 
@media screen and (min-width:600px){
  :root{
    --main-size:16px;
  }
}

以上当屏幕宽度大于600px时,这三个元素都会相应的改变字体大小,使用这个可以和rem媲美。也许你还想给其中一个元素单独指定一个比--main-size大一点的字体,那我们可以结合使用calc函数,如下:

CSS

:root{ --main-size:12px; } .box{ font-size:var(--main-size); } .box2{ font-size:calc(var(--main-size) 2px); } .box3{ font-size:var(--main-size); }

1
2
3
4
5
6
7
8
9
10
11
12
:root{
  --main-size:12px;
}
.box{
  font-size:var(--main-size);
}
.box2{
  font-size:calc(var(--main-size) 2px);
}
.box3{
  font-size:var(--main-size);
}

效果如图13.17

www.2003.com 9

图13.17 单独设置某个样式

calc允许你使用计算功能,不过需要注意的是中间需要一个空格。

虽然以上只是几个很简单的例子,但这些也足以说明CSS变量是多么的重要,在以后的CSS写作中不要忘了使用它。

未来的媒体查询

关于作者:追梦子

www.2003.com 10

快乐一直在我们身边,不管你身处何地何时,只要心是快乐的,一切都是快乐的。是那一秒,也是那一秒,都不会改变。 个人主页 · 我的文章 · 8 ·    

本文作者: 伯乐在线 - 追梦子 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者

应用规则集(@apply)

我想你如果体验过组件化,那么你对@apply肯定会爱不释手,简单来说@apply可以实现更小的组合。如下:

CSS

:root{ --overflow-ellipsis:{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }; } .title{ width:200px; @apply --overflow-ellipsis; }

1
2
3
4
5
6
7
8
9
10
11
:root{
  --overflow-ellipsis:{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  };
}
.title{
  width:200px;
  @apply --overflow-ellipsis;
}

在以上我们定义了一个用来实现当元素溢出时隐藏文字的代码段--overflow-ellipsis,当我们需要时只需要通过@apply来引用即可,真的是很实用的一个功能,不由想起来了Javascript中的函数。

如果某段代码是重复的,你不妨试试@apply

本文由www.2003.com发布于计算机教程,转载请注明出处:CSS 的未来www.2003.com

关键词: