justforuse的博客

原文链接: https://justforuse.github.io/blog/zh-cn/2020/03/last-of-type-tutorial/

随着深色主题使用越来越广泛，各终端的支持性也越来越好，为网站增加暗色主题支持显得更加重要。参考链接： https://justforuse.github.io/blog/zh-cn/2020/03/add-color-scheme-mode-support/...

今天继续分享4个：Prefers stylesNative lazy loadingForm elementsfromEntries详细内容： https://justforuse.github.io/blog/zh-cn/2019/12/best-web-features-of-2019-part-four/

今天继续分享4个：backdrop-filterallSettledmedia keysbackground fetch。详细内容可参考：https://justforuse.github.io/blog/zh-cn/2019/12/best-web-features-of-2019-part-three/

想让你的网站在手机上有类似原生APP的体验？那就增加PWA技术的支持吧。参考链接：https://justforuse.github.io/blog/zh-cn/2019/11/add-pwa-support-to-website/

参考链接： https://justforuse.github.io/blog/zh-cn/2019/11/font-difference-between-ios-and-android/安卓或者Windows下对于“中粗体”的支持度相对IOS不够好，主要是字体的原因。PingFang SC字体的显示效果很好。...

最近发现ios的webview下偶尔出现localStorage值同步不及时的情况，简单记录下。参考链接： https://justforuse.github.io/blog/zh-cn/2019/11/ios-localstorage-seems-not-sync/

很明显这个属性跟animation动画相关的一个属性，用来控制动画的起始和结束状态的属性。比如我们设置如下动画：div{ width: 100px; height: 100px; background-color: red; margin: 0 auto; animation: myBgColor 2.5s ease; animation-delay:

使用text-overflow的时候通常都会添加max-width属性，用来定义元素的最大宽度，但这个值通常为固定宽度、如果父元素宽度不定该如何设置样式？html: 为文本内容添加父元素p.p-wrapper<div class="row"> <div class="col-xs-5"> <div class="input-group"> <span

场景： 使用原生Audio代替Flash播放器。 问题：音频可以播放，但是无法快进，即无法跳转某个播放位置继续播放音频不是实时流，而是后台将文件转为流传回浏览器，跟直接访问音频文件地址没太大差别。解决思路：查看浏览器直接播放音频文件时的浏览器响应，发现头部部分字段不一致，解决方法：后台响应添加如下Header:response.addHeader("Accept-Ranges", "bytes")

播放按钮常见形式为三角形，CSS绘制三角形主要用到了border-width属性，他可以定义四个边框各个的宽度。播放样式代码：button{ padding: 0; background-color: white; box-sizing: border-box;}.play{ height: 74px; border-style: solid; b

最近在做IE9下使用原生audio标签播放mp3格式文件。遇到一个很奇怪的问题：Chrome下音频倍速播放，改变音量正常；但是IE9下存在约5秒的延迟。但IE9直接播放本地mp3文件正常，参照之前音频无法快进的问题认为是服务端返回头部字段存在问题，所以查了一下相关的项目：https://github.com/rickitan/Streaming-Audio-Con-Node 播放正常，按照它的返回

刚更新了Chrome到61，更新日志有关于scroll-behavior的内容。字面意就是定义滚动的行为，属性值为auto 或者 smooth。smooth允许滚动时采用平滑过渡，而不知直接翻到相应位置，最常见的比如回到顶部按钮，使用js方式的话可能需要写如下代码：element.scroll({ top : 0, behavior: "smooth"})但是使用CSS的话则可以直

参考文章：https://www.sitepoint.com/use-html5-full-screen-api/这个API的部分功能到今天也没有完全被浏览器实现。更多方法可参考文档。这里实现一个点击图片切换全屏展示的效果（只在Chrome下可用，其他浏览器会有相应的属性名）<style> body{ margin: 0; padding: 0; }

起初想找一个算法来寻找颜色对应的对比色，以在不确定文字颜色的情况下设置其背景色，这样不至于出现颜色重合或者差别不大的情况。 然后找到了这篇文章，其中介绍了mix-blend-mode这个属性，很神奇的属性，效果： 文字会随背景色的改变进行相应改变。mix-blend-modemix-blend-mode支持多个属性值，类似PS中的图片混杂模式。参考：MDN 示例：<styl

一个不错的入门视频：youtube

有的网站会为按钮添加点击波纹效果提升网站效果，我们可以简单实现一下：主要借助::after伪类及CSS3中的transform和transition属性： html:<div class="container text-center"> <button class="btn btn-default ripple btn-lg">Button</button> <bu

偶然知道这个功能，即自动生成随机文本。使用方法lorem + 单词数量示例（VS Code中）：俗称乱数假文，本是用于排版领域用来测试不同文本下的显示状态，可以参考百科使用这个功能可以帮助我们生成随机文本，省的复制n多个hello world了。

PostCSS是什么？官网如是介绍： PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.我的理解

参考链接： http://www.coffeecup.com/help/articles/what-is-a-web-safe-font/我们可以指定文字字体，他可以存在于计算机本机中，如果不是我们可以指定字体地址，使用font-face来指定。通常情况我们无需指定特别“花哨”的字体，常见的字体即可，但是对于不同计算机他们本次存储的字体又不尽相同，不同系统之间的更是如此，比如windows和mac

最近Angular项目需要验证表单输入框的合法性，但是在中文输入法下监听input事件会不断的获得按下的字符，尽管它并没有实际添加到输入框中，那要如何正确监听中文输入法下输入框input事件？参考链接：https://segmentfault.com/a/1190000009126012#articleHeader18输入框还会监听如下事件：compositionstart, compos

Chrome63版本新特性中包含支持overscroll-behavior属性，此属性的功能是什么呢？我们会发现当子元素滚动到顶部或底部继续滚动滚轮时，会导致父元素的滚动，但这种行为有时会影响页面体验。使用该属性可以禁掉此行为。在子元素上应用overscroll-behavior: contain即可。其他属性值还有none, 该功能除了contain的功能外还会阻止节点的默认滚动行为，主要是移动端

js原生方法insertBefore用于在某个元素之前插入新元素 定义： Node.insertBefore() 方法在参考节点之前插入一个节点作为一个指定父节点的子节点。语法： parentElement.insertBefore(newElement, referElement)值得注意的是 1. 如果要插入的newElement已经在DOM树中存在，那么执行此方法会将...

通常情况我们在文本右侧显示省略号，但如何在文本左侧显示省略号呢？参考： https://justforuse.github.io/blog/zh-cn/2019/08/how-to-show-text-ellipsis-on-left/

https://justforuse.github.io/blog/zh-cn/2019/08/prefers-color-scheme-tutorial/

Caniuse是一个很实用的网站，是否可以把它作为一个frame嵌入到别的页面中呢？文章链接：https://justforuse.github.io/blog/zh-cn/2019/05/embed-caniuse-shortcode/文章介绍了：hugo的shortcode代码，用来集成caniuse相关信息https://caniuse.bitsofco.de/...

有木有觉得优快云对博客统计的功能太少了？比如文章阅读量排行统计。链接： http://justforuse.github.io/csdn-crawler/

原文地址： https://justforuse.github.io/blog/2019/03/webpack-compile-scss/现在框架都提供了一套完整的编译配置，比如Vue;有时只是需要编译scss文件，在使用gulp的方式时遇到了无法识别SCSS的~语法的问题，其实也可以通过一些配置来解决，只是觉得既然webpack是主流，那不妨总结一套专门编译scss的配置webpack.c...

原文链接： https://justforuse.github.io/blog/2018/12/supreme-image/最近被本山大叔鬼畜洗脑了

如何使用CSS绘制奥运五环？第一反应是使用border-radius: 50%再加上z-index设置层叠关系不久可以了吗？然而，怎么可能会说这么常见的问题呢？稍加思考，原来他的层级不是叠加，而是有重叠的部分：所以单纯使用z-index并不能达到效果。想到之前看到的一篇文章，如何实现元素穿插的效果：https://css-tricks.com/1-element-css-rainbo...

css提供了可以省略过长文字的样式：text-ellipsis: hidden，那么如何检测文本是否被省略呢？如果有一个伪类，类似:placeholder-shown，比如：:ellipsis-shown，但是很现实并没有这个伪类，所以要想检测就必须使用js了。所以只要比对文本实际长度和显示长度是否一致就可以知道是否被省略了，DOM提供了两个属性分别对应了两个长度：scrollWidth和o...

你可能使用过或听说过各种字体图标库，比如fontawesome, glyphicon等，想过制作一个属于自己的字体图标库吗？今天就试着做一个。参考：https://justforuse.github.io/blog/2018/09/personal-font-icon-tutorial/...

CSS变得更像一个编程语言了，除了此次的css variables，还有很多提案，感兴趣可以去查一下。css variables让我们可以在CSS中使用变量了，使用和SCSS语法中的$my-color: red;类似 使用方法：:root { --my-color: red;}.container { /* --my-color: blue; */ color:...

@supports是CSS3新引入的规则之一，主要用于检测当前浏览器是否支持某个CSS属性并加载具体样式. 基本使用方式：@supports (display: grid) { .container { color: red; }}类似@media媒体查询，当浏览器支持display:grid这个CSS属性时才应用其中的样式所以上述代码比如在...

HTML提供了一种手风琴式效果显示内容总结与内容的元素：details 如果内部没有summary则默认显示Details 可以为details添加open属性设置默认开关状态&lt;body&gt; &lt;details&gt; Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga, sit...

dialog是html5.2新增的元素，功能就是常见的对话框功能，基本情况下不需要额外编写对话框组件。基本使用： 调用dialog元素的close()和open()方法实现对话框的打开和关闭，showModal可以打开模态框为dialog元素绑定close事件监听，当对话框关闭会触发此事件。&lt;dialog id='myDialog'&gt; &lt;p&gt; ...

假设我们正在填写一张表单，输入完文本内容后，点击提交按钮；那么在这期间，对于这两个表单元素来说都发生了哪些事件呢？<body> <input type="text" onblur="inputBlur()" onchange="inputChange()"> <button onclick="btnClick()" onmousedown="btnMouseDown()" onmo

参考链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollY（IE>=9）建议使用window.pageYOffset来代替window.scrollY，使用 window.pageXOffset 代替 window.scrollX

浏览器原生的滚动条有时过多会影响界面美观，IE下的滚动条更是如此，有时我们需要美化一下滚动条，可以使用浏览器原生的样式，或者使用JS插件，这里介绍如何修改Chrome下的滚动条样式。主要借助伪元素实现：//index.html<body> <div class="container"> <p>Pellentesque habitant morbi tristique sen

IE从IE9开始兼容html5，那么之前的浏览器如何显示html5元素呢？ 方法有很多，个人感觉比较方便的是引入一个js库，用来做兼容： http://cdn.staticfile.org/html5shiv/r29/html5.min.js参考链接： http://www.jb51.net/html5/22826.html