CSS3 - 随笔分类 - Zhentiw

[CSS] :has()

摘要：Brwoser support: https://caniuse.com/?search=%3Ahas <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt 阅读全文

posted @ 2025-05-27 19:43 Zhentiw 阅读(10) 评论(0) 推荐(0)

[CSS] clamp(min, current, max)

摘要：Browser support: https://caniuse.com/?search=clamp <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="wid 阅读全文

posted @ 2025-05-27 19:38 Zhentiw 阅读(8) 评论(0) 推荐(0)

[CSS] text balance

摘要：Browser support: https://caniuse.com/css-text-wrap-balance <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" cont 阅读全文

posted @ 2025-05-27 19:35 Zhentiw 阅读(8) 评论(0) 推荐(0)

[CSS] container queries (容器查询)

摘要：Browser support: https://caniuse.com/css-container-queries <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" cont 阅读全文

posted @ 2025-05-26 13:41 Zhentiw 阅读(17) 评论(0) 推荐(0)

[CSS] Dynamic viewport (动态视口单位)

摘要：Browser support: https://caniuse.com/?search=Dynamic%20viewport%20units Dynamic viewport mainly resolve the issue of mobile web, due to mobile has flo 阅读全文

posted @ 2025-05-26 13:39 Zhentiw 阅读(20) 评论(0) 推荐(0)

[CSS] aspect-ratio

摘要：Browser support: https://caniuse.com/?search=aspect-ratio <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" conte 阅读全文

posted @ 2025-05-26 13:24 Zhentiw 阅读(22) 评论(0) 推荐(0)

[CSS] Logical Properties (逻辑属性)

摘要：Brwoser support: https://caniuse.com/?search=Logical%20Properties%20 We want to achieve following effect, the first box, we applied writing-mode: vert 阅读全文

posted @ 2025-05-25 19:23 Zhentiw 阅读(7) 评论(0) 推荐(0)

[CSS] Writing Modes (书写模式)

摘要：Browser support: https://caniuse.com/?search=writing <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="w 阅读全文

posted @ 2025-05-25 19:14 Zhentiw 阅读(18) 评论(0) 推荐(0)

[CSS] min-content/max-content (尺寸局限)

摘要：Brwoser support: https://caniuse.com/?search=width%3Amin-content https://caniuse.com/?search=width%3Amax-content <!DOCTYPE html> <html lang="en"> <hea 阅读全文

posted @ 2025-05-25 19:09 Zhentiw 阅读(18) 评论(0) 推荐(0)

[CSS] CSS subgrid

摘要：Browser support: https://caniuse.com/?search=subgrid <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="w 阅读全文

posted @ 2025-05-25 18:57 Zhentiw 阅读(17) 评论(0) 推荐(0)

[CSS] CSS scrollbar-gutter 滚动条空间

摘要：Browser support: https://caniuse.com/?search=scrollbar-gutter When a element has limited size, and the content is oversized, the scrolling bar will sh 阅读全文

posted @ 2025-05-25 18:48 Zhentiw 阅读(44) 评论(0) 推荐(0)

[CSS] CSS Media Queries Range Contexts

摘要：Browser support: https://caniuse.com/?search=%40media Normally we write midea query like this: @media (max-width: 750px) { div { color: red; } } It ap 阅读全文

posted @ 2025-05-25 18:43 Zhentiw 阅读(6) 评论(0) 推荐(0)

[CSS] @layer

摘要：Browser support: https://caniuse.com/?search=layer As we know by defualt, class selector has a higher priority than element selector in CSS <!DOCTYPE 阅读全文

posted @ 2025-05-25 18:38 Zhentiw 阅读(12) 评论(0) 推荐(0)

[CSS] CSS animation-timeline

摘要：Browser support: https://caniuse.com/?search=animation-timeline <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" 阅读全文

posted @ 2025-05-13 01:13 Zhentiw 阅读(20) 评论(0) 推荐(0)

[CSS] CSS @property

摘要：Browser support: https://caniuse.com/?search=%40property Normal CSS variable doesn't support gradient animation <!DOCTYPE html> <html lang="en"> <head 阅读全文

posted @ 2025-05-13 01:09 Zhentiw 阅读(12) 评论(0) 推荐(0)

[CSS] CSS anchor positioning

摘要：Browser support: https://caniuse.com/?search=anchor%20positioning <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewpor 阅读全文

posted @ 2025-05-11 15:13 Zhentiw 阅读(16) 评论(0) 推荐(0)

[CSS] CSS @scope

摘要：Browser support: https://caniuse.com/?search=%40scope Example 1: global @scope () <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <me 阅读全文

posted @ 2025-05-11 15:11 Zhentiw 阅读(12) 评论(0) 推荐(0)

[CSS] CSS nesting

摘要：Browser support: https://caniuse.com/?search=css%20nesting Example 1: <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content=" 阅读全文

posted @ 2025-05-11 15:02 Zhentiw 阅读(11) 评论(0) 推荐(0)

[CSS] Tip: CSS variable usage

摘要：Sometime the element width is dynmiac, and you want to use the width in css, how to do that 1. Define css variable in css file, --wis the container's 阅读全文

posted @ 2025-05-06 14:17 Zhentiw 阅读(4) 评论(0) 推荐(0)

[Tools] PostCSS custom plugin

摘要：自定义插件在 PostCSS 官网，实际上已经介绍了如何去编写一个自定义插件：https://postcss.org/docs/writing-a-postcss-plugin 需要有一个模板 module.exports = (opts = {}) => { // Plugin creator 阅读全文

posted @ 2025-03-17 14:23 Zhentiw 阅读(24) 评论(0) 推荐(0)

Answer1215

随笔分类 - CSS3

公告