📝 前端代码片段记录
2023/12/01去除 Chrome 输入框自动填充的默认覆盖背景颜色。
input:-webkit-autofill,
input:-webkit-autofill:focus {
transition: background-color 600000s 0s, color 600000s 0s;
}
input[data-autocompleted] {
background-color: transparent !important;
}
渐变边框优雅写法。
.box {
background: #f8f9fc;
border: 3px solid transparent;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #f8f9fc, #f8f9fc), linear-gradient(276.98deg, #ffd200 0%, #ffee00 100%);
}
CSS Table 上圆角边框 border-radius / border。
table.rounded-corners {
/* Change these properties */
--border: 1px solid black;
border-radius: 10px;
/* Don't change these properties */
border-spacing: 0;
border-collapse: separate;
border: var(--border);
overflow: hidden;
}
/* Apply a border to the right of all but the last column */
table.rounded-corners th:not(:last-child),
table.rounded-corners td:not(:last-child) {
border-right: var(--border);
}
/* Apply a border to the bottom of all but the last row */
table.rounded-corners>thead>tr:not(:last-child)>th,
table.rounded-corners>thead>tr:not(:last-child)>td,
table.rounded-corners>tbody>tr:not(:last-child)>th,
table.rounded-corners>tbody>tr:not(:last-child)>td,
table.rounded-corners>tfoot>tr:not(:last-child)>th,
table.rounded-corners>tfoot>tr:not(:last-child)>td,
table.rounded-corners>tr:not(:last-child)>td,
table.rounded-corners>tr:not(:last-child)>th,
table.rounded-corners>thead:not(:last-child),
table.rounded-corners>tbody:not(:last-child),
table.rounded-corners>tfoot:not(:last-child) {
border-bottom: var(--border);
}
懒加载图片/视频资源
利用 IntersectionObserver
原生 API 实现,当资源经过视口或接近时触发函数。函数将图片或视频的 data-src 替换为 src 加载即可。
function lazyLoadImage(className) {
const images = document.querySelectorAll(`.${className}`)
const intersectionOptions = {
rootMargin: "100px", // 距离接近视窗100px像素时触发
}
const observer = new IntersectionObserver((entries) => {
entries.map((entry) => {
if(entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
entry.target.classList.remove(className)
observer.unobserve(entry.target)
}
})
}, intersectionOptions)
images.forEach(image => observer.observe(image))
}
<img className="lazyload" dataSrc="" alt="" />
lazyLoadImage(".lazyload")
// background-image 背景图实现方式同理,eg:
// 通过 data- 属性,当超过阈值时,加到 background-image 上
<div class="header-container" data-bgimage="bg.png"></div>
if (entry.isIntersecting) {
entry.target.style.backgroundImage = "url('"+entry.target.dataset.bgimage+"')";
observer.unobserve(entry.target);
}
// 兼容性写法:
if ('IntersectionObserver' in window) {
document.addEventListener("DOMContentLoaded", function() {
function handleIntersection(entries) {
entries.map((entry) => {
if (entry.isIntersecting) {
entry.target.style.backgroundImage = "url('"+entry.target.dataset.bgimage+"')";
observer.unobserve(entry.target);
}
});
}
const headers = document.querySelectorAll('.header-container');
const observer = new IntersectionObserver(
handleIntersection,
{ rootMargin: "100px" }
);
headers.forEach(header => observer.observe(header));
});
} else {
// 不支持 IntersectionObserver 则全部加载。
const headers = document.querySelectorAll('.header-container');
headers.forEach(header => {
header.style.backgroundImage = "url('"+header.dataset.bgimage+"')";
});
}
移动端 rem 方案
html {
font-size: 2.6666vw; // 1rem = (10 / 375)vw
}
body {
font-size: 1.6rem; // 16px;
}