byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10728鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。今天打开caniuse查了下，几个全新的颜色函数Chrome浏览器也支持了，这可是为数不多的落后Safari浏览器支持数年（2023年 vs 2021年）的CSS新特性了。与此同时，Firefox浏览器也已经开启“实验支持”，说明这几个颜色函数被所有现代浏览器支持已经是板上钉钉的事情了，这就意味着时机成熟，可以好好介绍这几个全新的CSS颜色函数了。一、最先支持的hwb()色值hwb()色值是这批颜色函数（CSS Level 4 Color Module）中最早支持的，兼容性如下图所示：HWB颜色模型是RGB颜色模型中点的圆柱坐标表示，类似于HSL和HSV。它是由HSV的创建者阿尔维·雷·史密斯于1996年开发的，以解决HSV的一些问题，相对而言，HWB对人类而言要更加直观，计算速度也更快一些。此颜色模型使用的时候先选择一个主色，然后再和白色和（或）黑色“混合”以产生所需的颜色。其中，第一个坐标H（色调）与HSL和HSV中的色调坐标相同，而后面的W和B分别代表白度和黑度，范围为0–100%（或0–1）。下图示意的就是不同H、W、B值下的色块显示图。由于HWB更符合人类的 ...继续阅读 (107)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10709鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、问题描述最近遇到了个bug，使用 div 模拟输入框，需要加上Enter回车键快捷提交，于是，我就写了类似下面的代码：input.addEventListener('keydown', function (event) { if (event.code == 'Enter') { event.preventDefault(); console.log('表单提交触发了'); } });结果发现，当打开中文输入法，希望回车确认英文的时候，会触发提交行为的执行。如下实际渲染效果（iframe内嵌页面）：奇了怪了，我开发这么多年，之前似乎没遇到这个问题啊，怎么回事？是浏览器升级了，是macOS系统原因，还是 div 输入框特殊行为？后来整了个最原始的demo测试研究了下，找到了原因，原来是这么回事！二、中文输入法与keyCode以前，我处理键盘行为，都是用的event.keyCode，无他，就是兼容性好。后来看MDN 文档，说 keyCode 要废弃了，不推荐使用，如下图所示：于是就研究了下，现在都推荐使用 event. ...继续阅读 (114)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10707鑫空间-鑫生活本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。一、经典居中套路对于绝对定位或者固定定位的元素，如果希望元素水平居中，是有个通用的使用公式的。如下：.target { position: fixed; left: 50%; transform: translateX(-50%); }如果项目对兼容性要求不高，还可以直接使用translate属性代替：.target { position: fixed; left: 50%; /* Chrome 104+, Safari 14.5+ */ translate: -50%; }但上面的实现有个问题，那就是定位元素的默认可分配的宽度只有50%的屏幕宽度，内容如果超出，就会发生换行，例如：春节前上架的掘金小册《技术写作指南》已经2000多人参与学习啦，感谢大家的支持效果如下所示（内嵌iframe，实时渲染效果，无内容请访问“鑫空间”原文）：可以看到，内容显示宽度只有一半，实际期望的效果是内容接近屏幕宽度的时候换行。使用传统的CSS属性还不太好处理，无论是max-width最大宽度，min-width最小宽度都不合 ...继续阅读 (106)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10681鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。在Chrome浏览器下，我们打开控制台，切换到 application 面板，会看到有一个名为background services的列表项，里面有一堆看起来很高级的API特性，如下截图所示：他们分别是（zxx: 点击可快速定位）：Background FetchBackground SyncNotificationsPayment HandlerPeriodic Background SyncPush MessagingReporting API好家伙，大部分都不认识。这种感觉就好像，疫情结束终于可以回老家了，结果村里面突然冒出了很多不认识的人。学习知识第一步，先了解，所以，本文就简单了解下这些后台服务都是做什么用的，觉得实用的，多花点时间深入，觉得鸡肋的，直接不求甚解。一、Background FetchBackground Fetch API是后台请求API，就是浏览器在背后默默地请求数据。这个比较经典的应用场景就是大文件下载。是这样的，虽然我们可以使用HTML download属性进行文件下载，或者使用FileSaver.js进行下载，但是如果文件非常大，下载 ...继续阅读 (119)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10694鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、AbortController的作用AbortController可以用来终止一个或多个Web请求。我大致看了下，此API可以终止fetch请求，任意响应主体和流。日常开发，用的最多的就是对 fetch 请求的终止，由于axios（知名HTTP 库，基于promise，可以用在浏览器和node.js 中）的底层是使用fetch实现的，因此，AbortController也能用来终止axios发送的请求。使用的时候先构造。controller = new AbortController();支持一个属性和一个方法：AbortController.signal返回AbortSignal对象，这个对象需要设置在fetch请求中，这样我们就可以在外部终止这个请求了。相当于在fetch请求内部嵌入一个抓手，或者说预埋一个开关。具体如何使用参见下一节的案例和代码示意。AbortController.abort()终止请求的方法。只要请求还没有完成，都是可以终止的。二、中断请求示意眼见为实，具体如何使用，还需要demo出马。您可以狠狠地点击这里：AbortController取 ...继续阅读 (95)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10678鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。今天才知道，浏览器纯JS不仅可以生成条形码和二维码，还原生支持对条形码和二维码的解析。一、BarcodeDetector API浏览器解析二维码、条形码使用的是Barcode Detection API。其使用套路都是围绕下面这三个展开。1. 声明检测器使用BarcodeDetector构造一个检测器。if ('BarcodeDetector' in window) { // 创建检测器 const barcodeDetector = new BarcodeDetector({ // formats 是检测的条码格式类型 formats: ['qr_code'] }); }其中，使用 formats 参数声明检测的条码类型。支持各种类型的条形码和二维码，具体见下表：格式描述图示aztec遵循iso24778规则的二维方型矩阵，形似Aztec金字塔，不需要外面有空白区域。code_128线性（一维）、双向可解码、自检，条形码遵循iso15417规范，能够编码所有128个ASCII字符（故因此命名）。code_39遵循iso16388规范的线性 ...继续阅读 (98)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10667鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、copyWithin()对比slice()JavaScript中数组的copyWithin()和slice()方法作用都是复制数组，且都是浅复制。区别之一在于copyWithin()是将数组中的一部分复制并替换另外一部分，总长度是不变的，而slice()方法只复制，不替换，返回的数组长度是由复制的数组项目个数决定的。看一个区别，已知数组arr为[1, 'A', '甲', 'I']，则分别执行arr.copyWithin(2, 3)和arr.slice(2, 3)会有如下所示的不同结果。arr = [1, 'A', '甲', 'I']; console.log(arr.copyWithin(2, 3)); // 结果是： [1, 'A', 'I', 'I']arr = [1, 'A', '甲', 'I']; console.log(arr.slice(2, 3)); // 结果是： ['甲']在控制台运行结果如下图所示：区别之二在于copyWithin()方法会改变原始的数组，而slice()方法并不会。例如：arr = [1, 'A', '甲', 'I']; ar ...继续阅读 (98)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10654鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、挪为他用正如在《CSS世界》和《CSS新世界》这两本书中多次提到的那样，CSS很多属性非常有意思，最后大规模流行使用的原因并不是其设计的本意，典型的如float浮动，box-shadow模拟边框等。而本文要介绍的CSS逻辑属性也是如此。所谓逻辑属性，指的是诸如类似margin-inline-start，padding-block-end这类包含inline/block和start/end关键字的CSS属性。其中 inline 和 block 表示方向， start 和 end 表示起止方位。在中文和英文网页环境中，inline元素（文字、图片、按钮等）的默认是从左往右水平排列的；block元素（如、元素等）默认是从上往下垂直排列的。因此，margin-inline-start就表示内联元素排列方向的起始位置，就是“左侧”，margin-inline-end就表示内联元素排列方向的终止位置，就是“右侧”。如果我们设置direction:rtl，则水平文档流方向就是从右往左，此时start对应的就是“右侧”，end对应的就是“左侧”。如果我们设置writing-mod ...继续阅读 (93)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10635鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。最近做的某个项目需要大量的DOM节点交互，以前这些API都是临时用用，这一次都是深入实践，感觉完全不一样。果然，实践才是精深技术最好的方式。趁着还很温热，感觉总结梳理下。注：本文章所使用的 API 均不考虑 IE 浏览器，以文本节点处理为主。一、常见方法需要了解的基本概念：文本节点就是纯文字节点，元素节点就是有HTML标签的元素，文本节点和元素节点都属于节点，在文档中使用 Node 表示，元素节点在文档中使用 Element 表示，文本节点则是使用 Text 表示。1. 创建文本节点使用document对象中的createTextNode方法。例如，创建一个内容是“CSS新世界”的文本节点，则可以：const textNode = document.createTextNode('CSS新世界');如果项目不需要兼容IE浏览器，也可以直接使用 Text() 方法进行构造，例如：const textNode = new Text('CSS新世界');在某些场景下，也可以使用 cloneNode() 方法以克隆的方式进行创建，例如希望下面的元素后面可以再新增“真棒👍🏻”这 ...继续阅读 (97)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10611鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。欢迎光临，效果先行：上为视频，不动轻戳。如果您是使用PC机器阅读的本文，也可以点击此页面实际操作感受下。如果查看源码，会发现只有个 img 元素，并无任何其他辅助：如何实现的呢？下面是正文↓一、背景之工作需求最近在做富文本编辑器相关的需求，其中就有上传图片后需要对图片进行拉伸的需求。比方说下图所示的交互就是腾讯文档中的图片缩放效果：我以前也多次实现过（图片上传，头像上传，以及一些工具类产品），不过实现方式都是元素外面包裹个 DIV，然后定位一些方框框，然后再去拉伸。如果是非编辑器产品，这么实现并没有多大的问题。但是如果是需要实时编辑的产品，IMG外面还有其他标签，势必会影响很多编辑操作。当然，还有方法就是JS定位，拖拽层覆盖在图像上，从技术成本上讲，也是一个不错的实现，但如果页面发生了滚动，或者拖拽很快，拖拽的小方块就有可能跟不上（具体要看你的实现）。所以我就在想，以如今的Web能力，有没有可能无需任何其他借助，单单就一个标签，就实现图像的拉伸效果呢？我脑中迅速遍历了下我所知的技术点，貌似理论上可行。然后……二、并没有预想的顺利原本的设计稿是这样的：四个角四个圆圈圈， ...继续阅读 (99)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10609鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。Web中有不少HTML属性或者CSS属性可以实现反向或者倒序的效果，这里整理下，欢迎补充。一、HTML reversed属性在HTML中，元素支持名为reversed的属性，可以在不改变DOM排序的同时，只让前面的序号倒序，例如：zhang: 这个属性xin: IE浏览器xu: 并不支持实时渲染效果如下：zhang: 这个属性xin: IE浏览器xu: 并不支持对于Chrome，Safari等现代浏览器，其兼容性是相当不错的：二、direction与水平倒排direction属性我之前有详细介绍过，可以参见“CSS direction属性简介与实际应用”一文。其作用是设置内联元素或者grid布局中的子元素的水平流向。我们可以基于这个特性让元素水平倒序排列。前提是这个元素是内联水平的，display计算值是下面中的任意一个都是可以的：inline、inline-block、inline-table、inline-flex、inline-grid。比方说下面这个例子：123.layout { direction:rtl; text-align:center; } ...继续阅读 (101)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10607鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、必须list-item水平元素一段普通的有序列表 HTML 代码：项目1项目2项目3此时前面就会显示1,2,3这样子的有序项目符号（实时渲染效果如下）：项目1项目2项目3不知道大家有没有深入了解过项目符号生效的机制是什么？是哪个HTML元素生成的？渲染的CSS属性又是什么呢？简单的现象背后往往藏着深入的知识。首先，项目符号是由元素生成的，生成的CSS是list-style-type，字面意思就是“列表样式类型”。然后是机制，是这样的，对于HTML元素，要想有项目符号，除了使用list-style-type属性，还有一个前提条件，就是元素的 display 计算值必须是 list-item（标签缩写就是这两个单词）。例如上面的li列表，我们如果改变第2个元素的display属性值，例如为flex，则前面的序号就会丢失，例如：项目1项目2项目3效果为：项目1项目2项目3此规则对于普通HTML元素同样适用，比方说下面有一个例子：A-有点点吗？B-有点点吗？.list-a { list-style-type: disc; } .list-b { display: ...继续阅读 (100)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10597鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、过去的禁用过去的禁用一般使用下面两种方法。1. disbaled属性这个只适用于表单元素，例如一个输入框设置disabled属性，就不能输入，click点击事件也不会执行，表单submit提交的时候，对应的数据也不会带过去。实时效果：对于诸如、、这些元素并不管用。不过设置了disabled属性的元素对于hover等交互行为并未阻止，因为类似原生的title提示，或者自定义的tips提示都是可以作用在被禁用的按钮等表单元素上的（见下图），算是一个不错的优点。相比之下，设置了pointer-events:none的元素的就无法实现这样的交互。2. pointer-events:none禁用pointer-events:none禁用是阻止鼠标行为，包括点击，悬停等交互。但是并不能阻止键盘访问，例如下面的输入框依然可以被键盘访问，并输入内容。因此，pointer-events:none其实并不是真正意义上的禁用。其优点在于适用于任何元素，特别适合实现可穿透的各类覆盖层。下面问题来了，有没有那种使用于任何元素，连键盘行为也能彻底禁用的实现方法呢？有，就是本文要重点介绍的in ...继续阅读 (98)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10574鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。我在2011年，那时候HTML5刚出来的时候，介绍了一波表单新属性，见“HTML5新增的form属性简介”一文。后来发现表单元素还有formaction、formenctype等 HTML 属性，见“HTML5新属性formaction,formenctype等简介”一文。以及还有checkValidity等form原生属性和方法，见“form原生JS验证方法和属性详细介绍”一文。你以为这样就大结局了吗？没，居然还有。就是本文要介绍的这些新特性。一、requestSubmit()方法requestSubmit()方法和submit()方法的区别在于requestSubmit()方法会触发开发者自定义的submit事件，而submit()方法会直接触发表单元素的原生提交，往往会页面刷新（如果action属性值为空）或者跳转。例如下面的 JS 代码：form.addEventListener('submit', function(event) { // 阻止默认的表单提交行为 event.preventDefault(); console.log('表单提交啦 ...继续阅读 (87)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10572鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、出现的背景长久以来，file类型的文件选择框有个非常诟病的问题，那就是浏览器默认的样式太丑，且无法自定义。实时效果如下所示：如果希望兼顾功能与视觉，通常的做法是隐藏文件选择输入框，然后使用元素模拟上传按钮，HTML结构示意如下：上传文件此时点击元素就会自动触发文件选择输入框的点击选择行为，从而呼出系统的文件选择框进行文件选择。然而这个方法有些啰嗦，代码并不是很简洁，在几乎所有表单元素都能自定义的年代（详见“伪元素表单控件默认样式重置与自定义大全”一文），文件选择输入框依然不能样式自定义就显得有些格格不入。于是，在这种背景下，::file-selector-button伪元素应运而生，专门匹配文件选择输入框样式中的按钮，就是下图箭头指向的那个按钮：二、实操演示已知 HTML 如下：CSS 代码内容见：/* 后面的提示文字颜色 */ [type="file"] { color: gray; } /* 主按钮的样式自定义 */ ::file-selector-button { height: 3rem; font-size: 1rem; ...继续阅读 (84)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10569鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、一言以蔽之在过去，设备尺寸的媒体查询都是使用min-width或者max-width这样的写法，例如：@media (min-width: 100px) and (max-width: 1900px) { /* your css here */ }表示浏览器窗体宽度在100px~1900px之间（包括100px和1900px）的时候匹配并渲染。现在，出了一种新的语法，不需要使用min-width或者max-width进行范围指定，直接使用更符合直观认知的大于号（>）、小于号（<）和大于等于（>=）小于等于（<=）号进行设置。例如：@media (100px <= width <= 1900px) { /* your css here */ }对于新人而言，这样的语法显然更容易理解（老语法常常搞不清楚到底包不包括边界），也更容易记忆（符合逻辑语言的书写习惯）。兼容性兼容性如下图所示（来自caniuse），Chrome和Firefox均已支持该语法，不过Safari目前并未支持，制约了此语法的应用与普及，但并不表示完全没法使用，本文最后会有示意。二、眼 ...继续阅读 (91)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10554鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、浏览器正式支持了Chrome105和Safari16已经正式支持@container规则了，见下图。Chrome105我是前几周升级的（上个月发布），Safari16是上周升级的（两周前发布），时间很接近。现在体验@container规则已经无需开启“支持实验性质CSS”选项，此时写文章，读者体验demo的时候可以直观地看到效果，介绍@container规则正是时候。//zxx: 如果你看到这段文字，说明你现在访问是不是原文站点，更好的阅读体验在这里：https://www.zhangxinxu.com/wordpress/?p=10554（作者张鑫旭）二、@container规则干嘛用的@container规则，也称@container查询，可以实时匹配指定为容器元素的尺寸，开发者可以基于不同的尺寸范围，对内部的元素进行特定的样式设置与布局实现。大家应该都知道@media媒体查询中有个尺寸匹配，例如：@media (max-width:1024px) {}然后该规则中的CSS声明会在屏幕宽度小于1024px的时候执行。而@container规则有些与之类似，只是 ...继续阅读 (78)

byzhangxinxufromhttps://www.zhangxinxu.com/wordpress/?p=10541鑫空间-鑫生活本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、先看大屏幕最近在做划词评论相关的开发，此交互功能的开发还是有一些门槛的，想到可能有小伙伴也会遇到类似需求，决定分享一下若干处理经验。在具体展开介绍之前，大家可以先看一下一个建议的demo演示效果：https://zhangxinxu.gitee.io/word-comment/演示页面部分区域截图：大家可能注意到了demo的域名是 gitee，没错，我将相关的实现开源了。项目地址是：https://gitee.com/zhangxinxu/word-comment不过此项目只有划词这部分的核心功能，评论一笔带过，实际生产过程中，评论和划词是有很多联动的，大家可以基于此项目的demo结合自己业务完成最终的开发。好，下面开始正式讲讲实现过程中遇到的难点和技术实现。二、先了解选区和范围的基本概念在 Web 中，选区指Selection，范围指Range。选区概念更大一点，一个选区中可能有多个范围，也就是可以从Selection中获取Range。Selection和Range都提供了很多属性和方法，可以让我们对选区进行增删改等操作。在过去，需要兼容IE的时代，选区和范围是 ...继续阅读 (86)

byzhangxinxufromhttp://www.zhangxinxu.com/wordpress/?p=6206本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。一、即将荣耀的-webkit-text-stroke属性无风不起浪，事出必有因，CSS文字描边属性text-stroke我最早在2010年的“CSS3 text-fill-color简介及应用展示”一文中就有提及，如今差不多七年过去了，期间并没有专门的文章介绍text-stroke文字描边属性，那本文到底是什么风吹过来的呢？今天，我使用caniuse查看text-stroke兼容性的时候，发现了一件令我震惊的事情，最新版的Firefox以及Edge已经支持text-stroke描边属性了，并且全部都是采用-webkit-私有前缀。没想到很多年前的言论居然成为了现实。我在12年的时候曾经翻译了一篇名为“即将到来的CSS私有前缀灾难”的文章，此文内容源自于下面的言论：CSS工作组(CSS Working Group)联合主席Daniel Glazmang告知大家非WebKit的浏览器厂商正在考虑支持-webkit-前缀CSS属性。没想到，在text-stroke属性上，真的所有其他非WebKit的浏览器厂商都支持了-webkit-前缀，看来主席不经意的一件或若干年后也会成为现实，这件事告诉我们 ...继续阅读 (91)

byzhangxinxufromhttp://www.zhangxinxu.com/wordpress/?p=5474本文可以转载，但务必注明原作者和原出处，以及请勿对原文内容进行编辑。之前知乎上有不少同行邀请我回答一些前端相关问题，但是，大家都知道了，要认真回答一个问题是需要大量时间和精力的，对于还在不断学习积累阶段的我，时不时分散原本的精力，打乱自己原本的节奏，实际上是一件不划算的事情。就好像邮件或者微信，来一条信息，你就去看一下，时间和精力都会大大分散，工作和学习效率必然会大打折扣。所以我的策略是一段时间后专门花时间统一处理，这样时间利用率会更高，投入产出比会更大。对于知乎上的这些前端的问题，我也打算采用同样的套路，趁着端午节前还有两个晚上的自由时间（当晚修正：两个晚上绝对搞不定，怕要月底前才能全部写好），决定抽十个比较具有代表性，自己能够驾驭的前端问题统一作答。问题一、前端现在怎么这么多人？原问题地址是：https://www.zhihu.com/question/55886635问题描述如下：投出去的简历没有人看了我的回答：想来想去，还是从一个非前端领域的切身故事说起吧。我的老家江苏泰兴是中国银杏之乡，产量全国1/3，而我外公家宣堡镇除了小馄饨出门，还是就是中国银杏第一乡的美称。在我小的时候，银杏的药用价值和使用价值被发掘，银杏价格突然猛增，那个时候的银杏树是没有人专门种 ...继续阅读 (89)

byzhangxinxufromhttp://www.zhangxinxu.com/wordpress/?p=6171本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。一、有请jquery.guide.js网站上线或者改版的时候，常常会做一个操作向导，告诉用户一些重要操作到了哪里，或者什么地方隐藏了什么好玩的东西，等等，虽然我都是直接关掉的，或者快速跳过，但是对有部分用户而言还是很有用的。这种提示比较好的交互效果是采用镂空的半透明遮罩，视觉重点一目了然，类似这样：我在去年的时候曾经写了一篇文章，名为“腾讯微云黑色遮罩引导蒙版更好的CSS实现方式”，介绍如何使用单标签，实现类似的交互效果，其中，核心技巧是使用了CSSborder属性，也就是周围的黑色半透明遮罩实际上是半透明边框。后来我发现了一种更好的实现方式，就是使用CSSoutline属性，outline属性为元素的轮廓，并不会增加任何元素的尺寸，也不会破坏原先的布局，因此我们只需要设一个非常非常大的outline宽度值，我们定位元素就永远天然镂空，根本不需要计算上下左右的半透明黑色区有多大。.guide { outline: 9999px solid rgba(0,0,0,.75); }最近正好有个改版项目有类似的需求，我要基于这个原理顺便整了一个jQuery插件，名为jquery.guide ...继续阅读 (101)

byzhangxinxufromhttp://www.zhangxinxu.com/wordpress/?p=5474本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。图片合成最常见的需求有验证码图片，亦或者图片加水印等，这种实现一般都是后端实现的。随着HTML5发展和现代浏览器的占比越来越高，我们其实也可以在前端直接进行图片的合成。优点在于，响应更快，体验更好；如果是和文字进行合成，我们可以利用客户端字体，视觉展现效果更丰富；同时展示和合成全部都是前端完成，因此更利于维护。这里通过举个例子，演示如何在前端实现多个图片合成的效果，主要是借助HTML5canvas相关技术。一、使用canvas在前端实现图片水印合成如果仅仅是普通的合成，例如一个底图和一个PNG水印图片合成，直接使用canvas的drawImage()方法即可，语法如下：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);各个参数示意为：参数描述img用来被绘制的图像、画布或视频。sx可选。img被绘制区域的起始左上x坐标。sy可选。img被绘制区域的起始左上y坐标。swidth可选。img被绘制区域的宽度。sheight可选。img被绘制区域的高度。x画布上放置img的起始x坐标。y画布上放置img的起始y坐标。widt ...继续阅读 (98)

byzhangxinxufromhttp://www.zhangxinxu.com/wordpress/?p=6154本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。最近，把团队内经常使用的一个基于Node.js制作的小工具给做成了可视化操作的桌面软件，使用的是electron，这里简单分享一下使用electron的一些经验和心得。一、如何使用electron把基本的开发环境给跑起来？我是这么处理的，electron官方提供了一个名为“electron-quick-start”的示例项目，地址为：https://github.com/electron/electron-quick-start然后把相关资源给弄下来，如果你是下载Zip包解压的，则资源默认都会放在一个名为“electron-quick-start-master”的文件夹中，把“electron-quick-start-master”改成你项目的名字，当然你不改也没关系，就怕过段时间忘记，然后小手一抖，当做普通资源给删掉了，到时候就男默女泪了。然后安装：npm install由于安装包比较大，所以-\/要转好几分钟才能装好。如果安装不顺利，试试换成使用淘宝NPM镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org然 ...继续阅读 (85)

byzhangxinxufromhttp://www.zhangxinxu.com/wordpress/?p=6142本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。可能很多小伙伴都不知道，我们只要在HTML代码上设置几个属性，就可以让浏览器支持我们自定义的快捷访问方式，而这个神奇的属性就是本文要介绍的，accesskey属性。一、HTML accesskey属性基本知识在HTML4.0.1的时候，HTMLaccesskey属性请可以作用在以下元素上：,,,,,以及元素。然后到了HTML5规范的时候，accesskey属性可以作用在任意的元素上，变成了“全局属性”。例如作用在元素上：自定义快捷访问这里的属性值'1'对应的就是键盘上的数字1，如果是accesskey="a"则'a'对应的就是键盘上的字母a。需要注意的是，虽然说accesskey属性值和键盘相对应，但并不是说直接按下这个键，就能快捷访问。浏览器是通过快捷键组合访问的形式进行页面元素的快速访问的。具体的组合方式参见下表（参考自MDN文档，有调整）： WindowsLinuxMacFirefoxAlt+Shift+keyControl+Alt+keyInternet ExplorerAlt+keyN/AGoogle ChromeAlt +keyControl+Alt+keySafariAlt+ ...继续阅读 (95)

byzhangxinxufromhttp://www.zhangxinxu.com/wordpress/?p=6131本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。HTML虽然入门简单，但是，要想日后深入，却要花费非常大量的时间，因为一些看似非常简单的属性，实际上牵扯到另外一个完整领域的知识。例如本文要介绍的这属性tabindex和下一篇要介绍的accesskey，与web网页无障碍访问息息相关，而且是键盘访问领域的。这些属性不仅可以触发浏览器层面的行为，本身对HTML的元素的交互特性甚至UI表现都会有影响。一、HTML tabindex属性的原本作用，行为与表现HTMLtabindex属性是一个“全局属性”，所谓“全局属性”，可以理解为“公共汽车属性”，也就是所有HTML标签都可以用的属性，比方说id，class属性等。HTMLtabindex属性是一个非常老的属性，浏览器支持多年，基本特性没有兼容性问题，老少皆宜，童叟无欺，放心使用。HTMLtabindex属性是一个与键盘访问行为息息相关的属性，或者换种说法吧，是个用户体验息息相关的属性。平常我们可能感觉不到它的价值，但是一旦我们的鼠标坏掉了或者没电了，我们就只能使用键盘。亦或者在电视机上，或者投影设备上访问我们的网页的时候，我们只能使用遥控器。就算设备都完全正常，对于资深用户而言，键盘访问可以 ...继续阅读 (89)

byzhangxinxufromhttp://www.zhangxinxu.com/wordpress/?p=6115本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。之前，我一直以为HTML是一个鸡肋HTML，估计到了HTML5时代会被废弃的命。但是，最近一查资料，乖乖了个咚，不仅没被废弃，反而发展了，新增了一些标签属性，例如rel，media，hreflang等。然后进一步研究发现，尼玛这货居然还可以用来解决一个困扰我很多年的棘手问题，形象立马高大上了起来。一、HTML原本作用HTML原本作用是给图像标记热点区域用的。例如一张中国省份地图，点击对应省份显示对应省份介绍的页面；又或者旭旭影院或者旭旭餐厅的座位平面图，点击对应座位选座，都是可以使用标签的。言语苍白，实例说话，您可以狠狠地点击这里：HTML基本使用demoHTML代码如下：此时图片上就有3个热区，我们使用Tab键索引高亮就可以窥见其轮廓范围，如下图片3连击：图片和热点区域元素关联是使用图片的usemap属性，其值对应的id或者name值（Chrome浏览器只支持name属性值关联）。这里出现了两个HTML标签，一个是还有一个是，这些都是从很早就支持的HTML标签，所以不必担心兼容性问题。其中就闭合特性来看，类似，是无法有子元素或其他子内容的。这里出现了几个属性：shapeshape表示点击 ...继续阅读 (83)

byzhangxinxufromhttp://www.zhangxinxu.com/wordpress/?p=6102本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。一、关于键盘可访问性所谓“键盘可访问性”，指的是用户只使用键盘访问网站的能力。例如，我们的iMac鼠标没电了，或者鼠标坏了，或者在智能电视中访问我们的网站，此时就只能依赖于键盘访问了。键盘访问网站的常用操作包括：Tab键索引控件元素；Enter键触发当前处于focus状态的点击行为；上下键上下滚动网页；Space空白键滚动一屏网页；Home键返回顶部；End键滚动到底部；等等。其中Tab键索引和Enter键点击是与交互相关的最重要的两个键盘行为。一般的操作行为是这样的，先Tab键按次序不断focus控件元素，包括链接，按钮，输入框等表单元素或者focus设置了tabindex的普通元素，处于focus状态元素，浏览器一般会通过虚框或者外发光的形式进行区分和提示，此时我们在按下Enter回车键，就相当于鼠标点击了这个元素，从而可以前往我们想去的目的地，或者执行我们想要的交互效果。而focus状态元素的标记默认全部都是使用outline属性，因此，类似下面的代码其实是不专业的：* { outline: 0 none; }a { outline: 0 none; }在全局去除元素的out ...继续阅读 (94)

byzhangxinxufromhttp://www.zhangxinxu.com/wordpress/?p=6063本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。很多人只要一提到@font face规则，心中就会不由自主“哦~~”的一声：“这个我知道，可以用来生成自定义字符小图标！”话是没错，问题在于很多人就以为生成字符小图标就是@font face规则的全部，实际上只是功能之一，如果真正了解@font face规则，你会发现，@font face规则可以做的事情其实非常多，尤其我们不考虑IE7，IE8浏览器的情况下。一、 @font face的本质是变量虽然说CSS3新世界才出现真正意义上的变量var（参见此文：“了解CSS/CSS3原生变量var”），但实际上，CSS世界中，就已经出现了本质上就是变量的东西，@font face规则就是其中之一，@font face的本质上就是一个定义字体或字体集的变量，这个变量不仅仅是简单的自定义字体，还包括字体重命名，默认字体样式设置等等。这个“变量”的意识很重要，有助于我们发挥@font face的潜力，可以让我们的CSS代码更加的精简，更方便的维护等。在进入正题之前，我们先要对@font face规则有个大致的面面观。@font face规则支持的CSS属性有：font-family，src，font- ...继续阅读 (94)

byzhangxinxufromhttp://www.zhangxinxu.com/wordpress/?p=5474本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。虽然一些常见中文字体，例如“宋体”，“微软雅黑”等，直接使用中文名称作为CSSfont-family的属性值也能生效，但我们一般都不使用中文名称，而是使用英文名称，主要是规避乱码的风险。还有一些中文字体，直接使用中文名称作为CSSfont-family的属性值是没有效果的，如“思源黑体”， “兰亭黑体”等，需要使用对应的英文字体名称才可以。总而言之一句话，你要想使用中文字体，就必须要知道其对应的英文名称。我在网上搜索相关资料的时候，发现几乎唯一流传一份中英文对应数据是2010年某位同学整理的，现在已经2017年了，所以其中不少内容已经过时了，如“仿宋_GB2312”、“楷体_GB2312” windows7及其以后版本都没有了；同时有很多遗漏和缺失的地方，例如OS X新晋“苹方”等字体。所以，我特意花了一两天的时间，对以往的数据进行了修正和补充，保证每一个字体都在不同系统下一个一个亲自测试验证，整理了一份更完善的中文字体英文名称对应关系一览表，您可以狠狠地点击这里：CSS font-family中文字体对应的英文名称一览表demo列表不仅仅是显示了对应关系，本身就是基于自身所表示的字体来渲 ...继续阅读 (90)

byzhangxinxufromhttp://www.zhangxinxu.com/wordpress/?p=6017本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。一、放在开头的结束语我上学时候，06，07年的样子，总是情不自禁被炫酷的flash动效吸引。印象很深的是一个一堆线和球连在一起弹来弹去的效果，觉得还厉害，实现这个效果的人一定是大牛，然后，反编译工具去查看这些酷酷的动态是怎么实现的。我这一看里面的源代码，我勒个擦，洋洋洒洒，代码认得我，我不认识它。但是，通过改改元素，以及一些数值参数，也能实现了类似的效果，并沾沾自喜，以为自己学到了技术，还好，我没这么走下去。其实现在很多前端小伙伴，跟我当时的做法很类似，去网上找插件，找工具，找现成代码，然后改改用用，也能满足项目需求，并认为自己学习能力很强，解决问题能力很强，实际上并没有什么竞争力，因为搬运工本质上就是一个体力劳动，一旦市场饱和，或者年龄上去搬运不动了，则职业生涯只能止步不前了。后来为了以后更高的高度，断臂求生，置之死地，告别拿来主义，毕业后长达九个月的时间，都在一直系统学习基础知识，CSS基础，JS基础以及PHP基础，这是一段很多人都不理解的过程，但现在回过头来看看，虽然好像起步比别人晚了，但是至少从目前来看后劲要比大多数人都要足。因为万丈高楼平地起，万变不离其宗，你基础扎实了，任何场景 ...继续阅读 (109)