09 2021 档案

CSS aspect ratio
摘要：有些时候我们要图片, iframe 配合容器比例，比如容器 4:3， 图片是 16:10， 而我们需要图片 object-fit: cover css 要实现这样的容器比例，之前都是用 hack 的方式 容器通过 padding-botom 给一个比例，同时给 relative。 图片就定位于容器。 阅读全文
posted @ 2021-09-26 16:26 泉油 阅读(156) 评论(0) 推荐(0)
Web animation API improvements in Chromium 84
摘要：基础概念：把 CSS 换成 JS @keyframes openAnimation { 0% { transform: scale(0); } 100% { transform: scale(1); } } 换成 const openAnimation = [ { transform: 'scale 阅读全文
posted @ 2021-09-23 13:37 泉油 阅读(62) 评论(0) 推荐(0)
input type="date" min 属性在 IOS Safari 不能兼容
摘要：天啊~ 又是 Safari，这功能是限制用户选择的日期 Link https://stackoverflow.com/questions/35682138/html5-date-picker-doesnt-show-on-safari https://caniuse.com/input-dateti 阅读全文
posted @ 2021-09-23 13:11 泉油 阅读(410) 评论(0) 推荐(0)
position: sticky 没办法用在 <thead> 或 <tr>
摘要：我一开始也是认为要把 sticky 放在 thead or tr, 但是大家说不能这样。具体原因，我也不知道…… 总之先 follow 吧 Link https://css-tricks.com/position-sticky-and-table-headers/ https://bugs.chro 阅读全文
posted @ 2021-09-23 13:06 泉油 阅读(195) 评论(0) 推荐(0)
Tag Manager Element visibility trigger 笔记
摘要：追踪网页 trigger 是通过 ID or Class, Tag Manager 给出 3 个基本设置 虽然匹配到多个 element, 但只触发一次 匹配到多个 element, 每个 element 触发一次 动态更新 element 后，触发一次 高级设置 最少内容展现百分比 element 阅读全文
posted @ 2021-09-23 12:52 泉油 阅读(64) 评论(0) 推荐(0)
append vs appendChild 的差别
摘要：append() appendChild() const child = document.createElement('p');parent.append(child); ok ok parent.append('Appending Text'); ok fail console.log(pare 阅读全文
posted @ 2021-09-23 12:27 泉油 阅读(216) 评论(0) 推荐(0)
Media Query Max-Height 在手机是依赖 ICB 还是 viewport?
摘要：什么是 ICB ? Media query 依赖是 ICB 的高度。 media query 不会因为 URL bar 隐藏起来后，就依赖 largest possible viewport @media screen and (max-height:617px) { body{ backgroun 阅读全文
posted @ 2021-09-21 13:54 泉油 阅读(71) 评论(0) 推荐(0)
transition-timing-function 的 step
摘要：在过渡中，都是 ease-in， cubic-bezier，我们只要声明时间，比如 10秒，那么最终每一个帧都会看到动画。 那么如果要 10 秒中的第 0%， 50%， 100% 呢？意思是我们只看到开始，中间，结束的 3 个画面。 这功能看起来不错，能自己做一个 gif animation: dr 阅读全文
posted @ 2021-09-12 12:03 泉油 阅读(154) 评论(0) 推荐(0)
transition 默认值的坑
摘要：一般的 mix 写法 transition: 3000ms opacity, 5000ms max-height; 分开的写法 transition-duration: 3000ms, 5000ms; transition-property: opacity, max-height; 使用 mix 阅读全文
posted @ 2021-09-12 11:30 泉油 阅读(180) 评论(0) 推荐(0)
:root vs html
摘要：猜猜看最终看到那个颜色？ :root { background-color:blue; } html{ background-color:red; } 答案是 :root :root 和 html 都是 HTML element，记得 :root 比 html 大。 伪类选择器比一般选择器来的大，比 阅读全文
posted @ 2021-09-10 01:20 泉油 阅读(168) 评论(0) 推荐(0)
Body overflow hidden 没办法阻止 scrollbar
摘要：spec 是这么解释的 如果根元素上的值是“visible”，则用户代理(游览器）必须将第一个这样的子元素的 “overflow” 属性应用到视口。 场景 当 body style height 50%; overflow:scroll, 是无效的 游览器会把 overflow 搬去 viewpor 阅读全文
posted @ 2021-09-05 20:02 泉油 阅读(52) 评论(0) 推荐(0)
HTML & body height 该怎么管理？
摘要：HTML, body 没有高度，body 依赖 内容来撑自己的高，而 HTML 也是依赖 body 撑自己的高。 这不符合我们看到的，所以市场开始出现 html, body { height: 100%; } 可是 body 的内容是会超过 100% 的，那么比较合适的是做成 min-height 阅读全文
posted @ 2021-09-02 12:39 泉油 阅读(70) 评论(0) 推荐(0)
Mobile URL bar and footer bar 如何影响 height
摘要：从 2011 safari ios 6 开始出现这问题 比如当某个内容使用了 100vh, 在 URL bar 出现和隐藏时，高度会不一样 vh 行为开始改版 到了 2016 年，chrome mobile 56 开始固定了，不在依赖 URL bar 这里有 3 个概念 vh (viewport h 阅读全文
posted @ 2021-09-02 12:24 泉油 阅读(121) 评论(0) 推荐(0)

Web Design Johor Bahru Malaysia - Stooges