Apache Echarts 5 线上发布会

CSS自定义属性的使用实例

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

过去一年来花了不少时间来研究CSS自定义属性相关的特性,而且在站上也发了多篇有关于CSS自定义属性相关的教程,其中有关于CSS自定义属性,也有涉猎CSS Houdini自定义属性相关的。但我想很多同学除了希望了解CSS自定义属性理论相关的知识之外还更想了解CSS自定义属性能做什么吧。在这篇文章中,我将整理一些有关于CSS自定义属性在实际开发中能做什么,并会在文章中提供相应的一些使用实际。希望能通过具体的实例帮助大家更好的理解和使用CSS自定义属性。

组件优化

Web组件(或者说UI组件)在Web中是最可见之一,使用CSS自定义属性可以让组件的代码变得更简单。拿Bootstrap的button举例

.btn-primary的CSS代码如下:

.btn {
    color: #212529;
    background-color: transparent;
    border-color: transparent;
}

.btn:hover {
    color: #212529;
}

.btn:focus {
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}

.btn-primary {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.btn-primary:hover {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.btn-primary:focus {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0a58ca;
    box-shadow: 0 0 0 0.25rem rgba(49,132,253,.5);
}

.btn-primary:active {
    color: #fff;
    background-color: #0a58ca;
    border-color: #0a53be;
}

不难发现,button在默认状态,:active:focus:hover状态,变化的只是colorbackground-colorborder-colorbox-shadow等属性。如果我们换作CSS自定义属性来构建的话,代码会变得更简称:

root:{
    --btn-color: #212529;
    --btn-hover-color: #212529;
    --btn-bg-color: transparent;
    --btn-border-color: transparent;
    --btn-box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
    user-select: none;
    padding: .375rem .75rem;
    font-size: 1rem;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn:focus {
    outline: 0;
}

.btn {
    color: var(--btn-color);
    background-color: var(--btn-bg-color);
    border: 1px solid var(--btn-border-color);
}

.btn:hover {
    color: var(--btn-hover-color);
}

.btn:focus {
    box-shadow: 0 0 0 0.25rem var(--btn-box-shadow);
}

在不同状态,比如.btn-primary.btn-secondary下只需要调整相应的自定义属性的值即可:

.btn-primary {
    --btn-color: #fff;
    --btn-bgcolor: #0a58ca;
    --btn-border-color: #0a58ca;
    --btn-box-shadow: rgba(49, 132, 253, 0.5);
    --btn-active-bgcolor: #0a58ca;
    --btn-active-border-color: #0a53be;
    --btn-hover-color: #fff;
    --btn-hover-bgcolor: #0b5ed7;
    --btn-hover-border-color: #0a58ca;
}

效果如下:

你可能已经发现了,在自定义属性的模式下,我们只需在相应的状态下调整自定义属性的值,不需要在代码中写CSS的属性:

使用CSS自定义属性,是不是比以前省事多了。这样做并不是说CSS自定义属性帮助开发者节约了多少代码或更易于维护,其真正的价值是:自定义属性让我们能够共享代码,让其他开发者可以重用或定制。比如说,我们可将一个button可变参数提取出来,并将这些参数设置为CSS自定义属性,那么就可以很好的调整(自定义地构建个性化)按钮的UI效果。

控制组件大小

在CSS Frameworks中很多组件都提供了相应的类名来控制组件大小,比如我们熟悉的Bootstrap中的按钮组件,有btn-lgbtn-sm类来调整组件的padding值,CSS Frameworks新起之秀Tailwindcss提供了更多类名来调整组件大小:

简单地说,通过调整组件的padding可以非常容易调整组件内距从而改变组件大小:

但往往影响组件大小并不仅仅是因为其 尺寸属性 (比如paddingwidthheightfont-size等)的设置,还和 属性取值的单位 也有紧密关系。比如,使用em单位,可以很好的调整组件组件大小:

em相似的相对单位还有remvwvhvminvmax以及%

而有了CSS自定义属性之后,我们可以更灵活的控制组件的大小:

正如上图所示,我们可以其于CSS自定义属性来调整font-size的值来改变组件大小,不过该方式有一个前提条件,那就是涉及到控制组件大小的属性(具有<length>的属性,比如widthpadding等)应该使用em来做单位(rem勉强也行)。我们使用这些方法来构建上图这样的卡片组件。

实现该效果最为关键的是在html中设置了font-size值为%值,它相对于16px做计算,同时我们在.card上设置的font-size值是rem值,它相对于htmlfont-size计算,另外在侧边栏aside调整自定义属性--fs的值,从而影响其font-size值的大小:

:root {
    --fs: 1rem;
    --root-fs: 100%;
}

html {
    font-size: var(--root-fs);
}

.card {
    font-size: var(--fs);
}

aside {
    --fs: 0.65rem;
}

另一个要点是,组件上的元素属性的值单位采用的都是em为单位,而em又是相对于自己font-size值计算,如果元素自已并未显式设置font-size,则会继承其父元素(祖先元素)的font-size

.card {
    max-width: 25em;
    box-shadow: 0 0 0.25em -0.15em rgba(255, 255, 255, 0.65);
    border-radius: 0.25em;
    border: 0.025em solid rgba(255, 255, 255, 0.65);
}
.card__thumbnail {
    border-radius: 0.275em 0.275em 0 0;
    overflow: hidden;
}

.card__thumbnail img {
    border-radius: 0.275em 0.275em 0 0;
}

.card__body {
    font-size: 1.125em;
    padding: 1em 1.25em;
}

.card__title {
    font-size: 1.5em;
    margin: 0 0 0.5em;
}

.card__content {
    font-size: 1.025em;
}

.card__footer {
    padding: 0.6em 1.25em 1.2em;
}

如果你未接触过值和单位之间的计算关系,建议你花点时间阅读下面相关的教程:

CSS自定义属性给颜色使用带来的变化

在Web运用中很多时候希望能很好的实现换肤效果。比如下面这个录屏效果,用户调整颜色时对应的插画颜色也会有所调整:

CSS自定义属性结合JavaScript可以很好的实现这样的效果。复制unDraw中的一个插画,查看代码,我们可以发现SVG中图形中使用fill来填充图形颜色:

在SVG的元素上稍作调整,比如添加类名:

<path d="M980.94772,659.04355h-743a1,1,0,0,1,0-2h743a1,1,0,0,1,0,2Z" transform="translate(-218.05228 -135.88181)" fill="#3f3d56" class="seat__fill"></path>

并在对应的CSS添加样式代码:

:root {
    --primary-fill-color: #6c63ff;
    --secondary-fill-color: #2f2e41;
    --leaf-fill-color: #f2f2f2;
    --leaf-fill-color-2: #e6e6e6;
    --seat-fill-color: #3f3d56;
}

.primary__fill {
    fill: var(--primary-fill-color);
}

.secondary__fill {
    fill: var(--secondary-fill-color);
}

.leaf__fill {
    fill: var(--leaf-fill-color);
}

.leaf__fill--secondary {
    fill: var(--leaf-fill-color-2);
}

.seat__fill {
    fill: var(--seat-fill-color);
}

调整对应的CSS自定义属性的值就可以调整SVG图形的颜色:

为此,我们使用JavaScript操作CSS自定义属性相关的API可以让用户操作颜色控制面板来调整插画的颜色:

const svgEle = document.querySelector("svg");

const inputColors = document.querySelectorAll('input[type="color"]');

inputColors.forEach((element) =>
    element.addEventListener("input", (evt) => {
        svgEle.style.setProperty(`--${evt.target.id}`, `${evt.target.value}`);
        console.log(evt.target.value);
    })
);

请尝试调整示例中颜色,你将看到的效果如下:

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

如需转载,烦请注明出处:https://www.w3cplus.com/css/use-cases-and-examples-with-css-custom-property.html

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

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