工具带,值得您立即使用,功能强大且稳定。
我认为,每个前端开发者都应该知道 :has()
不仅仅是一个“父级选择器”,
如何使用 subgrid
及其原因、如何使用内置 CSS 语法进行嵌套,以及如何让
如何平衡标题文字换行,以及如何使用容器查询单元。
本帖子是 去年每个前端开发者在 2023 年都应该知道的 6 个 CSS 代码段。
CSS:has(.potential-beyond-being-a-parent-selector)
:has()
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
:has()
已于 2023 年底在所有主流浏览器上实现!这个新的选择器
小而无辜,但其能够解锁的各种用例却会让您大吃一惊:
游戏、响应式、内容感知布局、智能组件以及
Jhey 在本文中深入探讨了更多相关内容。
![显示了 4 个面板,每个面板都有图片和说明。
每张图片都显示了一个激活越来越多的大脑的大脑。第一个面板是
:has()。第二个面板显示图中的“Figure:has(caption)”作为父级选择器。
第三个面板显示 .layout:has(> :nth-child(5)) 作为数量选择器。
第四个面板中显示 html:has(#checked) .new-subject 作为条件主题更改选择器。](/static/articles/5-css-snippets-every-front-end-developer-should-know-in-2024/image/has-meme.jpg)
以下是使用 :has()
作为父级选择器的几个示例。它之所以得此名称,是因为
选择器的主题通常位于选择器的末尾,例如 ul li
,其中 li
是主题。
并获取样式使用 :has()
时,选择器开头的元素可以变为
主题。在以下示例中,如果内部有元素,则按钮具有间隙
类为 .icon
。如果卡片内包含图片,卡片会改变方向。
button:has(.icon) {
gap: 1ch;
}
.card:has(img) {
grid-auto-flow: row;
}
长期所需的选择器是根据其包含的项数来更改布局。现在,这可以实现
与 :has()
搭配使用,因为它可以在查询子元素数量时将容器保留为主题。
main:has(> :nth-child(5)) {…}
另一个更高级别的示例:更改针对整个文档设置的样式 启用网页上的特定复选框后:
html:has(#dark-mode:checked) {…}
这些是简单的用例,只是看一下示例,不会改变选择器的主题
例如,您可能会认为 :has()
仅限于作为父级选择器。请考虑以下事项
示例。这些选择器会根据共同祖先实体检查某些内容,然后对选择器进行透视
与页面更深处的子元素有关。
如果有任何输入无效,则下面将显示一个表单错误元素:
form:has(:user-invalid) .error {
display: block;
}
当侧边导航栏具有 .--is-open
类时,以下代码会滑出主内容区域:
html:has(#sidenav.--is-open) main {
translate: -320px;
}
下面是一个有趣的演示,它使用 :has()
作为父级选择器,使用 :has()
进行数量查询,
和容器查询,从而使网格布局能够
1-12 个元素(纵向或横向):
创建子网格
subgrid
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
多年来,前端网络社区一直请求 subgrid 来帮助他们圆满完成 非常受欢迎且功能强大的 CSS 网格布局引擎。 现在,这三大主要引擎中均有提供。
如需查看概览,请点击此处详细了解 subgrid。
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
> article {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
}
}
以 CSS 方式嵌套
nesting
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
内置 CSS 嵌套功能已于 2023 年在所有主流浏览器中推出。 我甚至更新了网站,移除了编译嵌套的构建流程 更小的样式表!没错,包含嵌套的样式表较小 浏览器开发者工具就可以代表它了。
您可以点击此处,大致了解 CSS 嵌套语法。 了解所有细节。以下代码示例展示了一个语法示例。
.you {
.can-totally-ship-this {
&.if-you-wanted {
/* it's VERY MUCH like SCSS */
&:is(:hover, :focus-visible) {
/* put a bird on it */
}
}
}
}
.for-theming {
@media (prefers-color-scheme: dark) {
/* you can nest media queries */
}
}
/* or for theming with [data-theme="dark"] */
.button {
background: black;
color: white;
/* nest and do more than just append, flip it and reverse it */
[data-theme="dark"] & {
background: white;
color: black;
}
}
让浏览器平衡标题
balance
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
pretty
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
如果没有 text-wrap: balance
,开发者和文案人员将只能看到换行符提示
例如 <wbr>
元素或 ­
。这通常都是一场失败的战斗,因为只要
以任何方式对内容进行翻译、缩放或修改,
在以新的方式呈现内容时,封装提示就在恰当的位置。
通过设置均衡的文本换行,您可以将此工作交由浏览器处理。 您可以在以下 Codepen 中查看比较结果。
使用容器查询单元
cqw
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
去年的博文建议每个前端开发者都应该知道如何编写 容器查询。如果您还没有学到经验,不妨在 2024 年大胆创新 还可以查看容器查询单元简而言之 Ahmad Shadeed 在 2021 年写了一篇有关容器查询单元的精彩文章。
共有六个新的c电视quy 设备:
- 内嵌变体
cqi
。 - 宽度变体
cqw
。 - 屏蔽变体
cqb
。 - 高度变体
cqh
。 cqmin
中任意长度较小者的变体。cqmax
中任意长度的变体。
设想一个容器的相对和固有动画的场景。 通过 100cqi(这是容器内嵌大小的 100%)。
@keyframes slide-out-of-container {
to {
translate: -100cqi;
}
}
这张卡片包含容器自适应排版,以及一张可自行调整的图片 容器的方向,如果方向为横向,尺寸则减半。
.card {
:is(h2,h3) {
font-size: clamp(1.5rem, 5cqi, 4rem);
}
img {
inline-size: 100cqi;
@container (orientation: landscape) {
inline-size: 50cqi;
}
}
}
如果您对这些单元还不熟悉, 查看您在 2024 年可以使用的所有单元。