Mullice

Appearance

content 使用 data-* 属性 ​

text
<span data-text="some text"></span>

span::before{
 content: attr(data-text)
}

蒙层 ​

css
div {
    mask-image: linear-gradient(to right, rgba(255, 255, 255, 0.01) 3%, rgb(255, 255, 255) 10%);
    mask-mode: luminance;
}

filter ​

scss
// cover，遮罩
div {
    filter: brightness(50%);
}

mix-blend-mode ​

scss
// 背景色跟文字相反
div {
    mix-blend-mode: difference;
    isolation: isolate; // 开启新的层叠上下文。
}

media @width ​

scss
// 背景色跟文字相反
div {
    @media (width >= 40rem) {
        //    ...
    }
}

is、where、has ​

:is()

:is() 伪类接受一个选择器列表作为参数，匹配任何符合列表中任意一个选择器的元素。它可以减少重复书写选择器，提高代码简洁性。

is 会取()内最高的权重作为自身权重

scss
:is(h1, h2) {
    color: red;
}
// 利用 :is() 伪类重新选择到自身
.child:is(.parent.active *) {
    // ...
}
where

where 伪类与 is 伪类类似，接受一个选择器列表作为参数，匹配任何符合列表中任意一个选择器的元素。但是 where 伪类会忽略选择器的权重，将所有选择器的权重都设置为 0。

scss
:where(h1, h2) {
    color: red;
}
has

当前元素的子元素满足括号里的选择条件时，样式生效，一般用于子元素可能不存在的情况，例如判断元素是否存在标题子元素：

html
<div class="container">
    <h1 class="title">拥有此样式名将使样式生效</h1>
</div>
<style>
    .container:has(.title) {
        background: grey;
    }
</style>

clamp ​

css
.content {
    width: clamp(100px, 30%, 200px);
    /*	width 取父元素的 30% 作为宽度，如果该值范围在 100-200px 中，则有效，否则最小为 100px，最大为 200px */
}

ViewTransition ​

在更新 DOM 内容的同时，轻松动画过渡;

在 css 上设置 view-transition-name，相同的值将进行前后比较，然后实现动画

delete{target="_blank"}

dialog{target="_blank"}

toggleTheme{target="_blank"}

改变表单控件颜色 ​

accent-color，如 checkbox、radio、range、progress

color-scheme ​

css
:root{
  color-scheme: light dark; // 跟随系统深色模式
}
/*
下面例子，将页面置成深色模式，同时媒体查询如果匹配到系统的设置也是深色的时候，那么 color: red; 生效
*/
:root{
	color-scheme:  dark;
}
@media (prefers-color-scheme: dark) {
	body {
		color: red
	}
}

layer css 层级 ​

设计组件库的时候，像是一些重置、class 样式，可能会造成全局的污染，需要添加 important 或者增加权重等方式进行调整；layer 就是为了解决这个问题，通过定义层级的优先级，来应用不同的样式

使用
css
/* 调整优先级，越右边的应用优先级越高 */
@layer bg_green, bg_red;

@layer bg_green {
    * {
        background-color: green;
    }
}
@layer bg_red {
    * {
        background-color: red;
    }
}

其他引入文件

@import "theme.css" layer(utilities);

<link rel="stylesheet" href="theme.css" layer="theme">

tailwind + element-plus

css
@import 'element-plus/dist/index.css' layer(ele);
/* 注意这行应该处于全部 css 文件之首*/
@layer base, ele, utilities;

content-visibility 可见内容渲染 ​

  • visible: 默认值。对布局和呈现不会产生什么影响。
  • hidden: 元素跳过其内容的呈现。用户代理功能（例如，在页面中查找，按Tab键顺序导航等）不可访问已跳过的内容，也不能选择或聚焦。类似于对其内容设置了display: none属性。
  • auto: 对于用户可见区域的元素，浏览器会正常渲染其内容；对于不可见区域的元素，浏览器会暂时跳过其内容的呈现，等到其处于用户可见区域时，浏览器在渲染其内容。

auto 的时候，滚动条高度也会因内容渲染变化，可以配合 contains-intrinsic-size,设置占位高度，减少滚动条抖动情况

css
.card {
    margin-bottom: 10px;
    content-visibility: auto;
    contain-intrinsic-size: 312px; /*添加此行*/
}

文字采用背景色 ​

bg-clip-text

-webkit-background-clip: text;

usage ​

height transition
css
:root {
    /* allow-keywords 允许关键词也生效过渡效果；numeric-only 默认值，只对数值变化过渡*/
    interpolate-size: allow-keywords;
}

/* 方案2 */

div {
    height: 0;
    transition: 1s;
}
div:hover {
    height: calc-size(auto);
}
显隐切换加上过渡效果

@starting-style 定义动画起点状态

transition-behavior: allow-discrete 启用离散动画,允许离散的 css 属性(display 等)支持 transition 过渡效果

typescript
<div className={cn(
    'starting:opacity-0 starting:-translate-y-2 transition-discrete duration-500',
    visible ? 'block opacity-100 translate-y-0' : 'hidden opacity-0'
)}></div>
Details