favinavi - Online notes-html-page1

https://blog.xiaoz.org/archives/16772

by: 119hjx  visibility 1716
2023-09-21 07:11 (UTC)

累计布局偏移: Cumulative Layout Shift, 简称CLS，是一项web性能的重要指标，旨在避免页面渲染时，某些元素（比如图片、字体等）加载前后占位不同导致页面呈现的内容发生突然变化，降低用户使用感受。比如图片未加载前，原来是某个链接的位置，突然被加载后的图片取代，页面发生了“跳动”，用户点下去的时候就不一定是用户想要的去处。

但是，某些情况下，我们又无法直接明确指定图片的宽度和高度，比如为了自适应不同的屏幕大小，我们需要图片按屏幕宽度的百分比来呈现，这时候，就无法简单地直接明示图片的宽/高。一旦不指定图片的宽/高，那么我们就容易遇到CLS问题，因为浏览器在读取图片并加载前，不知道该预留多大位置给图片。

那么我们如何避免这个两难的局面呢？

一种比较简单的做法是给图片加上一个包围元素，指定这个包围元素的宽高比，比如宽度80%，高度40%（根据图片的宽高比计算得出），与图片的实际宽高比一致。然后把图片放入其中，指定图片宽度100%。这样，浏览器就会预留相应的并且正确的图片位置，从而避免CLS问题。

下面我们以一张大图（1920*1080，16:9）为例，演示如何具体实现。（点击页面红色“演示”按钮查看效果）

by: fanshome  visibility 1903
2023-07-26 09:32 (UTC)

这个问题相信很多像我一样的非专业开发者遇到过，就是感觉checkbox是一个神奇的存在，为什么这么说？就是在开发网页过程中，有时候使用checkbox一切顺利，提交表单的时候用JavaScript检查它的checked或value的状态或取值都一切正常；但是又有些时候，无论在JavaScript中怎么折腾，感觉这个checkbox一点儿不听话，明明已经选中了，checked的状态始终不变，真是头疼。

当然，上网学习过，MDN的标准答案是：

如果一个复选框在其表单被提交时没有被选中，就不会有任何代表其未被选中的状态（例如 value=unchecked）的值被提交给服务器——该值根本就没有被提交给服务器！如果你想在复选框未被选中时提交一个默认值，你可以在表单中加入一个具有相同的 name 和 value 的 <input type="hidden"> 字段，它可以由 JavaScript 生成。

checked：
一个布尔属性，表示该复选框是否被默认选中（当页面加载时）。它不表示这个复选框当前是否被选中：如果复选框的状态被改变，这个内容属性不反映这个变化。此时，只有 HTMLInputElement 的 IDL 属性 checked 会更新。

怎么样？是不是好像弄懂了一点东西，但是好像又不是特别明白的样子。假如一个复选框的状态被改变，checked属性不反映这个变化！这时什么意思？如果不变化，那么为什么有些页面它表现又那么正常呢？

经过认真学习思考，我终于得到了我自己的结论，可以翻译成大白话，是个程序员都能明白：

就是复选框在form表单中提交的时候，它会很正常！！！划重点，在“表单中提交时”，一个字也不能少！！！其实MDN的解释里有说，只是没有太过强调罢了。再翻译一下，先假设有这么个场景：

如果为了方便用户，比如在用户设置某些选项时，希望把复选框当成一个开关来用，选中表示“开”，不选中表示“关”，直接根据复选框状态后台就更新数据库里的状态，而不需要用户有提交表单的动作。假如你此时 没.有. 在页面中制作一个表单，只是 单.独. 一个复选框，然后希望用JavaScript来处理后续，那么你就惨了，你会发现无论你怎么折腾，貌似都不能得到当前复选框的“checked”状态，挠头吧？！

其实，这是对的，因为复选框本来就是这个德行，没有表单的提交动作，checked状态是不会跟着用户的鼠标点击勾选而变化的，你只是在页面上看到了框里多了一个勾或变成了一个空的框框，就只是“看到”而已。

那么，假如想在页面上实现前述功能，想让复选框像个开关一样直接起作用的话怎么做？

答案也很简单，如果不想麻烦而使用表单来实现，就扔掉checkbox，换言之就可以只是把checkbox当一个摆设，只是给用户的眼睛看状态，就好了呀！真正用JavaScript处理的东西可以是和checkbox一点关系都没有的，比如我们可以在JS里设一个变量来记录，或者给页面上某个dom元素添加一个属性来记录我们需要的状态，比如：<div id='switch' status='0'></div>，用户点一下checkbox，我们就把“status”值在“0“和”1“之间做个变化，不要去读checked是true or false，直接读写switch元素的status属性值就好。

好吧，也许我的理解并不完全正确，但是以我目前的三脚猫水平而言，事实好像就是如此。

by: fanshome  visibility 2437
2023-06-03 16:45 (UTC)

这个示例网页使用了一个较大的背景图片，并使用CSS的background-size属性和@media查询来确保这个图片在不同尺寸的终端屏幕上都能够自适应。在小于或等于768像素的屏幕上，字体大小和位置也会进行相应的调整。

注意：部分浏览器（比如微软的edge）不支持AVIF格式图片，所以演示时无法显示图片。

by: fanshome  visibility 1948
2023-06-03 06:06 (UTC)

在这个示例中，我们将图像的最大宽度设置为100%，并将高度设置为自动。此外，我们还添加了一个样式，以使图像居中于其容器元素中。这将确保图像在不同大小的屏幕上都能适当地缩放，不会失真或拉伸。

注意：部分浏览器（比如微软的edge）不支持AVIF格式图片，所以演示时无法显示图片。

by: fanshome  visibility 1898
2023-06-03 06:06 (UTC)

非常真实的抖动效果，鼠标移上去还有叮当声哦...

点“演示”按钮体验一下。

by: fanshome  visibility 2876
2023-05-25 08:52 (UTC)

使用css: linear-gradient来实现线性颜色渐变背景，效果见下图：
[img]

点击“演示”按钮可以查看效果。

by: fanshome  visibility 1801
2023-05-20 13:50 (UTC)

在很久很久以前，没有智能手机的时代，写网站只要考虑PC显示屏幕，基本上任何页面元素都只要固定的宽度和高度，比较好处理。

为了提高页面的加载速度，讲究点的方法是：
假如某个页面有多个小图片（比如二十个小图标）需要显示，可以把这二十个小图片合并到一张大图，然后通过背景图片切片的方法（background-position:）来显示不同的小图片，从而极大地提高页面加载速度。

当今时代，适配大大小小各类屏幕成了某种必需，最好能适配超过分辨率的pc大屏幕、普通笔记本电脑、pad、手机等等。虽然网速比从前提高了很多，但是，尽量减少网页图片使用数量依然是提高网页加载速度的必要手段。

有些时候，我们需要为同一类型、同样大小的链接配上不同的图片，此时，假如能够只使用一张图片来解决问题就更好了。例如，某些场合要用户选择不同的浏览器来进行下一步，假设用到以下这一张图片中的5种浏览器：

[img]

需求是：图片能自动适配不同屏幕宽度，使用背景图片方式来分割出5个链接，缩放窗口大小时，图片自动跟着缩放，同时宽高比不变，即保持图片不变形；与此同时，对应的5个链接也要随着背景图片的缩放而同比例缩放。

那么要怎么实现呢？请看以下CSS代码，任何用到宽度、高度的地方都使用百分比，保证缩放比例不变形。

by: fanshome  visibility 1969
2023-06-03 06:09 (UTC)

有时候会发现现成的图标很美观，但是和一般习惯不同（或者纯粹不符合个人喜好），比如“分享”图标，一般是一个箭头，但是箭头方向感觉和习惯的相反，这时就需要来个水平镜像。
与其化精力重新画图或寻找合适的图标都太麻烦，不如用css的transform来实现镜像。
正好favinavi的logo非常适合来说明镜像效果，请点击“演示”按钮查看效果。
favinavi.com的logo: [img]

by: fanshome  visibility 3548
2023-05-25 17:06 (UTC)