Norman's Note 諾曼筆記

Norman's Note 諾曼筆記

CSS

原則

可以用 CSS 解決的,就不要用到 JS

技巧

  path {
    fill: #c0cbcf;
  }
useEffect(() => {
  document.body.style.overflow = 'hidden';
  return () => {
    document.body.style.overflow = null;
  };
}, []);

不知道怎麼寫的時候,可以參考 Bootstrap 的 code

https://getbootstrap.com/docs/4.5/components/toasts/

* {
  -webkit-tap-highlight-color: transparent;
}

(Learned by Add tap highlight color override style by project)

過場動畫 CSS

transition: border-color 0.5s;

  transition-property: all;
  transition-duration: 0.3s;

當你用 js 改 css 屬性的時候,中間的過場變化設定
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property

各種屬性

Input

Loading spinner

https://www.w3schools.com/howto/howto_css_loader.asp