下面重点介绍几个实用价值比较高的特性

:has()--父选择器

终于可以告别"父选择器缺失"的时代！has()让你能够根据子元素的存在来选中父元素

/* 为包含错误提示的表单控制件添加红色边框 */
.form-group:has(.error) {
    border:1px solid red;
}

px是我们熟悉且常用的CSS单位，但在如今这个设备屏幕尺寸千差万别的时代，px似乎不在像以前那么好用

分享一个强大的CSS新特性，它将改变我们编写响应式样式的方式，让我们告别繁琐的媒体查询，轻松实现流畅的『流体式』布局

px的问题

px是一个绝对单位，它代表屏幕上的一个屋里像素点，这意味着 width: 300px; 在任何设备上都会视图渲染成300哥像素点宽。

为了解决不同尺寸设备渲染的问题，传统的做法是使用大量的媒体查询

.title {
    font-size: 48px;
}

@media (max-width: 768px) {
    .title {
        font-size: 32px;
    }
}
@media (max-width: 480px) {
    .title {
        font-size: 24px;
    }
}

从Chrome137开始，CSS引入了一个全新函数--if()，让我们可以在样式里写if/else逻辑了

为什么会关注CSS if/else

在平时开发中，我们经常会根据不同条件切换样式，比如响应时布局、特性检测、主体切换等。传统CSS的做法通常是使用媒体查询

@media (orientation:landscape) {
    .card { flex-direction: row; }
}

@media (orientation: portrait) {
    .card { flex-direction: column; }
}

:empty CSS伪类用于选择不包含任何子元素的元素。子元素可以是元素节点或文本(包括空格)。但是注释、处理指令和CSS content不会影响被认定为空

示例

<div>
  <h2>contenteditable</h2>
  <p>If you want to make fill-in-the-blank-type-stuff with text that runs like a paragraph and you want placeholder text too, you can use <i>'contenteditable'</i> to make inline-editable fields <span contenteditable class="demo"></span> and set your placeholder text on the <i>content</i> property with the <i>':empty:before'</i> pseudo-selector. No JavaScript needed! Try it below!
    <br /><br /> Works in IE9+.
</div>

<div>
  <p>Hi my name is <span contenteditable class="name"></span> and I'm a <span contenteditable class="job"></span>. I live in <span contenteditable class="city"></span> and I like to <span contenteditable class="activity"></span>. My favorite programming language is <span contenteditable class="language"></span>.</p>
</div>

在此之前，这个分类完全没听过，对于display我的学习是这样的，一开始block、inline、inline-block，后来多了个none,在后来学了flex，其他的table、contents等也见过几次，但是没有深究。不过这里只是作为解释型的介绍，了解一些其他的属性值，有一些布局还是比较复杂的，像table、list、grid布局都是可以写很多的，以后可以单独吓出来

外部值

外部值就是定义自身元素的外部表现，而不影响其内的子元素。

• display: block;

• display: inline;

  块级元素和行内元素，这两个很常见了。譬如，div、h1-h6、p元素等就是块级元素，span、i、label等就是行内元素，通过改变这两个值，去改变他的视线方式

• display: run in

  这个属性倒是不常见，也不常用，基本上也只有IE和Opera支持他。很简单，就是让设置了这个值的属性【闯入】下一行

  <span>我是</span>
  <span style="display: run-in">run in</span>

IOS圆角不生效

ios中使用border-raduis配合overflow:hidden出现了失效的情况

出现此问题的原因是因为ios手机会在transform的时候导致border-radius失效

解决方法: 在使用动画效果带 transform 的元素的上一级div元素的css加上下面语句

-webkit-transform:rotate(0deg);

在推特上面看到 T. Afif 介绍的十个 Loading 效果。如上图。

Yeah，很赞哦，挺实用的，遂记录下来。

为保证运行正常，咱先规定下：

* {
    box-sizing: border-box;
}

问题

之前安卓过CSDN的浏览器插件，右下角有一个DARK模式切换功能

出于好奇，今天了解了一下原理，结果发现一个神奇的css属性：mix-blend-mode

• 切换前

• 切换后

解析

在body标签下多了几个标签

最后锁定在第二个div标签

原理其实也很简单，在打开模式后，会在标签上多加几个class

其中的 darkmode-layer 这个 class 是这样的

我们这里只重点强调@font-face里font-weight，font-style的用法，因为我在使用@font-face时对这一块的使用根本不清楚，感觉网上好多人忽略了这个非常重要的地方。

@font face规则支持的CSS属性如下

@font-face {
    font-family: 'example';
    src: url('example.ttf');
    font-style: normal;
    font-weigth: normal;
    unicode-range: U+0025-00FF;
    font-variant: small-caps;
    font-stretch: expanded;
    font-feature-settings："liga1" on;
}