图解CSS: CSS中的函数

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

一直以来大家都不把CSS当作一门编程语言,是因为他不像其他和程序语言一样具有程序语言的特性,比如变量、函数、逻辑运算等。但随着CSS不断的变革,CSS也越来越像一门程序语言,比如CSS也有变量、逻辑操作和函数等特性。虽然说这些特性不像其他程序语言那么强大,但他实实在在的在变化,而且有了一定的进步。今天主要和大家来聊CSS中的函数。

简介

CSS中的函数不像其他功能模块有自己独立的规范,但是他真的存在于CSS中,而且大家在平时编写CSS的时候已经用到过了CSS函数。那么,CSS中的函数是什么呢?为了解开这个迷,我们先从其他的程序语言开始,比如我们前端最熟悉不过的JavaScript语言。

在一些编程语言中,函数可以用来执行特定任务的,而这些执行特定任务的代码都放置在一个花括号{}块中。就拿JavaScript来说吧,我们有一个helloWorld()函数:

function helloWorld() {
    alert('Hello, CSS and JavaScript')
}

helloWorld()

执行helloWorld()函数后会弹出一个对话框:

前端开发者都知道,JavaScript中还可以给函数传递一些参数,这些参数是一些数据或文本,并且可以在函数的逻辑中输出。比如上面的函数,我们给其传递一个参数name

function helloWorld (name) {
    alert(`Hi, ${name}, welcome!`)
}

helloWorld('大漠')

这个时候大漠就是传递给函数helloWorldname

在JavaScript中编写函数,主要是帮助我们做一些重复性的工作。

在CSS中,也有函数,但他的函数构建和JavaScript这样的编程语言有所不同。CSS的函数同样会返回一个值,但这些值主要是赋值给CSS属性的,最终将是CSS属性的值。换句话说,函数返回的结果赋值给不同的CSS属性时,所起的作用也将不同。就拿CSS中最早的函数之一calc()来说吧,如果赋值给width那么是用来指定宽度的值,如果给border-width,那么是用来指定边框粗细的。

另外,CSS中的函数相对于程序语言中的函数来说要简单的多,因为CSS函数中不会带有复杂逻辑处理,最多也就是一个表达式,比如calc(10vw + 10px)。这样一来,CSS中的函数要简单地多。

虽然CSS的函数简单,但根据不同的功能特性,其类型也多。接下来,我们就来和大家聊聊CSS中常见的一些函数。

CSS函数的基本特征

CSS的函数有着其自身的特征,简单地说,CSS中带有小括()的一般会被认为是CSS的函数。在CSS中使用()的地方主要有CSS选择器CSS属性值。比如:

虽然CSS不能创建自己的函数(自定义函数),也不能具备复杂的逻辑能力,但CSS函数也具备一些简单的逻辑处理能力。比如上图中的:not()选择器(也称为函数),就可以过滤掉.active的类名。

另外,CSS函数不像其他程序语言的函数,它的输出本质上是可视的。这个输出主要用于控制CSS属性的值,从而影响元素的样式效果。例如:

a:hover {
    filter: drop-shadow(.25rem 0 .75em #f36)
}

上面示例使用的是CSS滤镜中的阴影(drop-shadow()),当鼠标悬浮到元素上是会有一个发光效果。

如果要用一句话来描述CSS函数的话,那么可以是:

CSS函数主要服务于CSS的选择器和属性,它有着一个最基本的特性,那就是带有一个小括号()标记符,在括号内可以放置值(参数)

CSS函数类型

时至今日,W3C规范中并没有一份独立的规范来描述CSS函数,但这些函数的确存在,并且散落在不同的功能模块中

我根据功能类型,对CSS函数做了一个简单的类型划分,如下图所示:

上图中的函数大部分都有档可查,W3C规范对其做出详细的描述。其中有很多是我们熟悉的,比如伪类选择器函数渐变函数颜色函数滤镜函数等,当然也有我们不太熟悉(甚至从未见过的)函数,比如数学函数其他函数所列的。

接下来,我们会简单的介绍这些函数,以及其出处,但不会详细的介绍每个函数的作用和使用。有关于它们更详细的描述,建议查阅规范中对应的描述。

常见的CSS函数

我们从最常见的几个函数开始。这几个函数是特意上图中提出来的,因为在还没有提CSS函数概念的时候,他们就出现在我们的代码中,而且使用频率也较高。这几个函数就是url()attr()calc():lang():dir()

url()

url()函数来自CSS Images Module

我想最早接触到url()应该是在给元素添加背景图片的时候,换句话说,就是通过url()函数一加载图像资源:

.element {
    background-image: url(wavy.png);
}

但在今天的CSS中,url()不再局限于background-image属性中,还可以用于:

background-image: url("https://mdn.mozillademos.org/files/16761/star.gif");
list-style-image: url('../images/bullet.jpg');
content: url("pdficon.jpg");
cursor: url(mycursor.cur);
border-image-source: url(/media/diamonds.png);
src: url('fantasticfont.woff');
offset-path: url(#path);
mask-image: url("masks.svg#mask1");
@font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

简单地说,在CSS中可以使用url()函数来引用相应的资源,有点类似于HTML中的srchref属性。

attr()

attr()函数来自CSS Values and Units Module

原则上说,attr()能运用于所有的CSS属性,但目前仅能服务于CSS的伪元素::before::aftercontent属性。该函数可以用来获取到HTML元素的属性的值(比如data-*属性)。最为常见的示例就是构建Tooltips

[tooltip]::after {
    content: attr(tooltip); 
}

在一些场景之中,我们可以让Web的体验更佳,比如图片加载失败,让UI上更美:

另外有一个场景,attr()函数非常有用,即“在打印页面的时候,希望链接地址能打印出来”。实现该效果我们就可以借助attr()函数来完成:

@media print {
    a[href]:after {
        content: " (" attr(href) ")";
    }
}

另外还可以将相对链接,锚点做一些处理:

@media print {
    a[href^="http"]:not([href*="mywebsite.com"]):after {
        content: " (" attr(href) ")";
    }
}

你可以尝试打开上例,然后按下command + p快捷键(MacOS系统),你会看到非打印状态和打印状态下的不同:

calc()

calc()函数来自CSS Values and Units Module

calc()到来之前,CSS不能像其他程序语言去做一些计算操作。那么自calc()来到我们的身边之后,他具备一些简单的数学四则运算,即可以在calc()函数中进行加(+减(-乘(*除(/的运算,而且也可以添加小括号()来控制其运算的顺序。

有了calc()之后,在一些动态计算的场景就变得容易地多。比如对安全区域的计算,calc()让事情变得简单地多

@supports (padding-top: constant(safe-area-inset-top)) {
    .main {
        padding-top: calc(var(--safe-area-inset-top) + 88px);
    }
    .detail {
        background-position: 0 calc(var(--safe-area-inset-top) + 395px), 0 0;
    }
}

@supports (padding-top: env(safe-area-inset-top)) {
    .main {
        padding-top: calc(var(--safe-area-inset-top) + 88px);
    }
    .detail {
        background-position: 0 calc(var(--safe-area-inset-top) + 395px), 0 0;
    }
}

时至今日,calc()的使用场景很多,比如我们构建响应式设计时,font-size大小加把锁的时候calc()就起到在关键性的作用:

@media (min-width: 320px) and (max-width: 959px) { 
    h1 { 
        font-size: calc( 1.5rem + 16 * (100vw - 320px) / (960 - 320) ); 
        /* 对于负的斜率,需要对断点求倒数 */ 
        line-height: calc( 1.2em + 3.2 * (100vw - 960px) / (320 - 960) ); 
    } 
}

特别是随着CSS自定义属性的出现,calc()的作用就更大了,给开发者带来的便利性就更强了,比如在《图解CSS: CSS 颜色》一文中提到的,可以使用calc()和CSS自定义属性,灵活的实现颜色反色效果:

:root {
    --red: 28;
    --green: 150;
    --blue: 130;

    --accessible-color: calc(
        (
        (
            (
            (var(--red) * 299) +
            (var(--green) * 587) +
            (var(--blue) * 114)
            ) / 1000
        ) - 128
        ) * -1000
    );
}

:lang()

:lang()来自于Selectors Level 4

如果你平时的业务有涉及到国际业务,那么对于语言的使用应该有较高的要求。

作为Web开发者,都知道,可以在HTML的元素中通过lang属性来指定文档语言的类型,比如:

<html lang="en"></html>
<html lang="zh-CN"></html>

也可以在除<html>元素上的其他元素上显式指定lang属性:

<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>

在CSS中,我们可以通过:lang()函数(常称为伪类选择器),根据不同语言类型,设置不同的样式效果:

:lang(en) > q { 
    quotes: '\201C' '\201D' '\2018' '\2019'; 
}

:lang(fr) > q { 
    quotes: '« ' ' »'; 
}

:lang(de) > q { 
    quotes: '»' '«' '\2039' '\203A'; 
}

:lang(ko) > q {
    quotes: "\300C" "\300D" "\300E" "\300F" "\300C" "\300D" "\300E" "\300F";
}

:dir()

:dir()来自Selectors Level 4

从《Web中向左向右》一文中我们可以得知,不同的语言类型有关不同的布局方式,特别是方向性有明确的要求,这样做主要是便于用户的阅读。比如我们熟悉的英文,它的阅读方式都是从左往右(ltr;对于阿拉伯语系,它的阅读方式都是从右往左(rtl

在HTML中,我们可以显式地使用dir属性指定其阅读方式(ltrrtl)。

<div dir="rtl">
    <span>test1</span>
    <div dir="ltr">test2
        <div dir="auto">עִבְרִית</div>
    </div>
</div>

本例中 :dir(rtl) 会匹配最外层的div,内容为test1span,和有希伯来字符的div:dir(ltr) 会匹配到内容为test2div

同样的,在CSS中,我们可以使用:dir()函数来为不同的阅读方式指定不同的样式。

:dir(rtl) { 
    color: red; 
}

:dir(ltr) { 
    color: blue; 
}

请使用Firefox打开上面的Demo,你将看到:dir()函数对应的样式效果:

url()calc():lang():dir()四个基础函数中可以得知,CSS函数可以返回一定的值,返回的值主要服务于CSS的选择器和CSS属性。就目前为止,伪类选择器函数主要用于CSS的选择器,用来过滤元素;除伪类选择器之外的其他函数主要用于CSS的属性,作为属性的值。不管哪类函数,都可以在()传递一定的参数值(参数可以是单一的,也可以是多个的,还可以是表达式)。

自定义属性函数

自定义属性函数又称为CSS的变量函数,来自于CSS Custom Properties for Cascading Variables Module Level 1

熟悉CSS的前端开发者都知道,早期的CSS不像其他程序语言有变量的概念。自CSS Custom Properties for Cascading Variables Module Level 1出现,在CSS中也有了变量的概念。

在现代CSS中,可以使用双破折线--在选择器中声明自定义属性:

:root {
    --color: #f36;
}

selector {
    --color: #f36;
}

正如上面示例中所示--color

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/css-functions-guide.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部