小技巧

文中部分css会用UnoCSS去写。

网页撑满全屏

不管子元素什么情况都能让网页撑满全屏。相比100vh的好处是，在高版本ios（即“safari浏览器的地址栏变到下面且浮动”的ios版本）上，也不会在内容未超出一屏时出现滚动条。

在外层元素上添加

main {
  min-height: 100%;
  display: grid;
}

  <main class="min-h-full grid">
    <!-- child -->
  </main>

全面屏iPhone的Safe Area

CSS边框合并

使用<table>标签时可以通过设置border-collapse: collapse合并表格边框。对于非表格布局，可以对单元格使用margin-right, margin-bottom

.cell {
  border: 1px solid #bfbfbf;
  margin-right: -1px;
  margin-bottom: -1px;
}

  <div class="grid grid-cols-3">
    <div class="cell">cell</div>
    <div class="cell">cell</div>
    <div class="cell">cell</div>
    <div class="cell">cell</div>
    <div class="cell">cell</div>
    <div class="cell">cell</div>
  </div>

获取隐藏元素样式

众所周知，display: none的元素无法获取到它的实际width, height。对display: none的元素使用getComputedStyle时，会显示原始css值。比如

<div class="hidden">
  This is a hidden element.
</div>
<style>
.hidden {
  display: none;
  width: fit-content;
}
</style>

通过window.getComputedStyle(document.getElementsByClassName('hidden')[0])获取到的width是fit-content。如果想要获取实际宽高，可以参考我写的这篇文章 ➡️ 获取隐藏元素（display: none）的样式

使用Cloudflare Workers实现域名代理

同时使用对象与数组解构

美化你的类型

通过这个类型使你的类型提示显示完整的{ type: string; name: string; count: number }而不是Foo & Bar

type Prettier<T> = {
  [K in keyof T]: T[K]
};