Dixeran

Dixeran

Major in CS, fall in love with front-end & graphics.

Beijing
30 posts
Tech

浏览器在加载CSS和其内部资源时的策略

在使用 Service Worker 的时候,可以拦截对 CSS 的请求。如果拦截后返回的响应,是人为构造的 Response 对象,则该对象不存在 url 属性,浏览器会认为这个 CSS 是从所请求的 URL 获得的,因此,这个 CSS 内部的相对路径资源(图片、import的其他CSS)加载的基地址会是原 URL。 如果拦截以后直接返回另一个服务器的响应,此时返回的 Response 对象包含 URL 属性,是浏览器生成的对象。此时浏览器认为该 CSS 内部的其他相对路径资源都应该从新的 URL 处加载。

  • Dixeran
    Dixeran
Tech

Vue+Tween实现带动画的手风琴布局

纯 CSS 的问题 当手风琴内容固定的时候,使用特定的 active class 配合 transition 即可在 CSS 中完成手风琴布局,大概长这样: .content{ height:0; transition:height 0.2s ease;/*动画*/ } .active{ height:100px;/*事先确定的高度*/ } 然而作为一个通用的手风琴组件,不可能事先确定高度,最后还是要依赖JS。 原生 JS 的方法 通过js,我们可以获得伸缩容器内的原始高度 clientHeight(注意此时设置的 box-sizing 应该是 border-box 才能和 element.style.height 对应)

  • Dixeran
    Dixeran