- CSS#
.parent-element:hover .item:not(:hover) { opacity: 0.5; }
- 1
- 2
- 3
- 4
- CSS#aspect-ratio 支持两个值, 比如
aspect-ratio: auto 1/1
遇到 replaced element 时, 使用自身的宽高比, 否则使用 1:1 的比例; tailwindcss/aspect-ratio 需要使用aspect-[auto_1/1]
这种方式来使用双值。 - CSS#image-rendering - Ref
- CSS#margin-trim
- CSS#:focus-visible 浏览器来判定是否需要显示焦点样式, 例如在键盘导航时显示, 鼠标点击时不显示。
- CSS#:focus-within - 选择器匹配一个元素, 如果该元素或其后代元素处于焦点状态。
- CSS#:link/:visited/:any-link - order: link, visited, :hover, active
- HTML#input[type=checkbox][switch] - DEMO:
- gsap#steps
- CSS#border-radius: 9999px - CSS Border-Radius Can Do That?
Let f = min(Li/Si), where i ∈ {top, right, bottom, left}, Si is the sum of the two corresponding radii of the corners on side i, and Ltop = Lbottom = the width of the box, and Lleft = Lright = the height of the box. If f < 1, then all corner radii are reduced by multiplying them by f. Overlapping Curves
full100%让文字垂直居中可以height = line-height
,vertical-align: middle + ::after(inline-block + h-full)
,table-cell
,flex/items-center/justify-center
,container + [line-height = 100cqh]
- CSS#absolute + m-auto centered
- CSS#contain - layout/paint/style[作用域]/size[inline-size]. none,content[=layout/paint/style],strict[=layout/paint/style/size] - The Figcaption Problem
- CSS#contain-intrinsic-size - 允许开发者为元素指定一个固有的尺寸, 以便在元素的内容未加载时提供一个占位符。
比踩中狗屎更加无法忍受的事情,当然是踩到了,结果还被别人看在眼中,而比这更惨烈的事情,无疑是看到的人,还开口告诉你,你真的踩到狗屎了 - 《剑来》
- truncate - tailwindcss#truncate
- hyphens - tailwindcss#hyphens
- CSS#accent-color/word/accent, caret-color/word/caret, playing with the new caret CSS properties
- Audio not playing after returning from background on iOS Chrome and a possible solution
- ponyfill
- smoothy
- 低 - wqay
- glossary/术语表, contiguous/连续的, debounce/防抖, throttle/节流
-
When you put a webserver up on the internet. anywhere, hosting anything, you will see “the background radiation of the internet”, and it looks like this Ref
- 高考#未录取全部备注退档原因
-
回购土地和散户的房产,减少商品房供给,以此推高房价,房子成为彻底的富人专属。普通人不得不去租房。回购的房产转建成人才公寓、租屋等租赁住房,垄断租赁市场,推高租金。 Ref
- Responsive video is (almost) easy now
- Custom video placeholder with lazy load for better performance
- fit-text - Setting Line Length in CSS (and Fitting Text to a Container)
- Nintendo Switch HomeScreen recreated with CSS and a li’l bit of JS
- An Interactive Guide To Rate Limiting
- CSS#Getting Started with Style Queries, CSS Style Queries
- A highly configurable switch component using modern CSS techniques
- CSS#It’s time for modern CSS to kill the SPA
- JavaScript#Array.fromAsync - Modern async iteration in JavaScript with Array.fromAsync()
- Tool#oklch.com
- tailwindcss#[text-sm 和 leading 样式如何配合实现原子性的] text-:
font-size: <text-*>; line-height: var(--tw-leading, --sm-leading)
leading-:--tw-leading: <leading-*>;
; 另外支持 text-sm/8 语法结构 - Animation#vue-bits, react-bits
- Animation#SVGs that feel like GIFs
- Native dual-range input
- Flex justify content equally distanced items
.parent-element { &::before, &::after { content: ''; } }
- CSS#@media (hover: hover) - Custom scroll bars
- Hack#Hack for iOS Safari to display the HTML video thumbnail - By simply adding #t=0.001 at the end of the video file url, we are telling the browser to skip the first millisecond of the video. media-frags
- video#Video processing with WebCodecs
- video#Transferable_objects - 已解码frame - I(Intro Frame)/P帧(Predictive)[预测帧,参考前面的帧,仅存储差异部分。压缩率高]/B帧(Bi-predictive)[双向预测帧,参考前后的帧,压缩率最高,但延迟大] - visibleRect/codedRect
- video#EncodedVideoChunk
- video#Scrubbing videos using JavaScript
- soft#Make videos programmatically
- npm#animated-scroll-to
- npm#snapdom
- Animation#Stellar Rush - 1. default 2. blink 3. flying 4. win 5. fail 6. cashout - Using CSS animations instead of JavaScript timers
- Animation#Monorail turns any CSS keyframe animation into an interactive graph
- Animation#Introducing “Unleash the power of Scroll-Driven Animations”
- svg#A Friendly Introduction to SVG
- svg#vector-effect - SVG non-scaling circle and rectangle
- DOM#addEventListener 支持
option = { signal }
参数, 可以通过AbortController
来取消事件监听器 - 工程师如何更好投资
- JavaScript 线性代数:向量
- book#SLUM: The Shadow Library Uptime Monitor
- image#placeholder
- image#avif
- image#progressive image element
- Animation#Some Things About Keyframes
- What I think about when I edit
- A Letter to Myself as a Fresh Software Engineer
- Laws, Theories, Principles and Patterns that developers will find useful
- Faster Integer Parsing
- CSS#Customize your CSS Border
- CSS#Conditional CSS
- CSS#::marker
- CSS#border
- CSS#container style queries - CSS container queries are finally here
- CSS#[flex] basis-[min-content]basis-[max-content]basis-[fit-content]basis-[content]; w-12basis-autobasis-auto + max-w-12flex-noneflex-autoflex-1flex-[0.5]flex-1/10flex-0 + basis-0flex-none + basis-0
- CSS#Offset parent and stacking context: positioning elements in all three dimensions
- CSS#Overflow Clip
- CSS#Playing with Infinity in CSS
- CSS#Sliding Doors of CSS
- CSS#supports
- Custom Range Slider Using Anchor Positioning & Scroll-Driven Animations
2025 第 30 周
更新: