📝 前端代码片段记录

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;
}