[CSS] 常用 CSS snippets - mixin

Layout 相關

CSS Resets

/* http://meyerweb.com/eric/tools/css/reset/
  v2.0 | 20110126
  License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

meyerweb

Box-sizing reset

@mixin box-sizing-reset {
  html {
    box-sizing: border-box;
  }

  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
}

填滿空間（fill full space）

fill-full-space 中將 top, bottom, left, right 都設為 0 的意思就等同於 height: 100%, width: 100%：

@mixin fill-full-space {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Demo - fill full space of outer container @ CodePen

What does “top: 0; left: 0; bottom: 0; right: 0;” mean? @ StackOverflow

/**
 * For sticky footer
 */
.grow-height-parent {
  display: flex;
  flex-direction: column;

  > .grow-height-child {
    flex: 1;
  }
}

See the Pen Sticky Footer The Right Way(grow-height) by PJCHEN (@PJCHENder) on CodePen.

水平垂直置中（flexbox-centering）

有時會搭配 fill-full-space 使用：

@mixin flexbox-centering {
  display: flex;
  align-items: center;
  justify-content: center;
}

清除浮動（clearfix）

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

clearfix @ 30 seconds css

Web UI

客製化捲軸（Custom Scroll Bar）

/* Document scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
/* Scrollable element */
.some-element::webkit-scrollbar {
}

Custom Scrollbar @ 30 seconds of CSS

客製化選取文字（Custom Text Selection）

::selection {
  background: aquamarine;
  color: black;
}
.custom-text-selection::selection {
  background: deeppink;
  color: white;
}

Custom text selection

禁止選取（Disable selection）

.unselectable {
  user-select: none;
}

disable selection @ 30 Seconds of CSS

滑順捲到某個位置（Smooth Scroll）

// 在有捲軸的地方下

html {
  scroll-behavior: smooth;
}

這個方法可以搭配 window.location = #foobar 使用，一樣會有效果。

Scroll Behavior @ CSS Tricks

Button Reset

.btn-reset {
  border-radius: 0;
  margin: 0; // Remove the margin in Firefox and Safari
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-transform: none; // Remove the inheritance of text transform in Firefox
  padding: 0;
  border-style: none;
  -webkit-appearance: button;
  &:focus {
    outline: 0;
  }
}

HTML Element Reset @ PJCHENder Codepen

CSS 變數（CSS Variables）

// 建立變數
:root {
  --some-color: #da7800;
  --some-keyword: italic;
  --some-size: 1.25em;
  --some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray;
}

// 使用變數
.custom-variables {
  color: var(--some-color);
  text-shadow: var(--some-complex-value);


  // 可以在後面帶入 fallback value（如果沒有定義該 variable 的話，即會套用 fallback）
  font-style: var(--some-keyword, normal);
  font-size: var(--some-size, 16px);
}

custom variables @ 30 seconds of CSS

inline-element

隱藏文字（text hidden）

.text-hidden {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

超過字數則顯示為 `...`

keywords: `text-overflow`, `ellipsis`, `text-truncate`

p {
  width: 20em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

文字左右對齊（需多行時有效）

keywords: `test-justify`

p {
  text-align: justify;
}

標題左右對齊（單行亦有效）

keywords: `justify`, `text-justify`, `左右對齊`

.justify {
  height: 1.5em; /* 設定希望的列高 */
  line-height: 1.5em; /* 設定希望的列高 */
  text-align: justify;
  text-justify: inter-character; /* 若用 inter-ideograph 則只會在 chrome 有效 */
}

.justify:after {
  content: '';
  display: inline-block;
  width: 100%;
}

See the Pen Text Justify by PJCHEN (@PJCHENder) on CodePen.

圖片 RWD 設定

keywords: `image responsive`

.img-responsive {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

背景圖片 RWD 設定（自動調整高度）

keywords: `background image responsive`, `background image auto height`

.foo {
  height: 0;
  padding: 0; /* remove any pre-existing padding, just in case */
  padding-bottom: 75%; /* 這裡要利用背景圖片的 高 / 寬 自己設定百分比，*/
  background-image: url(foo.png);
  background-position: center center;
  background-size: 100%;
  background-repeat: no-repeat;
}

100 width background image with an auto height @ StackOverflow

其他

Responsive Video Container

/* Responsive Video (RWD) */

.responsive-video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.responsive-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

不要選到最後一個

/* 除了最後一個 li 其他都套用 */
ul li:not(:last-child) {
  border-right: 1px solid #666;
}

Progress bar 進度條

See the Pen Radius Progress Indicator by PJCHEN (@PJCHENder) on CodePen.

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress -->

<div>
  <progress value="1" max="100">70 %</progress>
  <span id="percent">32 %</span>
</div>

CSS

/* test on chrome only */
html {
  height: 100%;
  width: 100%;
}

body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fafafa;
}

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

span {
  font-size: 14px;
  line-height: 16px;
  color: #333333;
  width: 36px;
}

progress {
  width: 164px;
  height: 16px;
  border-radius: 100px;
  overflow: hidden;
  margin-right: 10px;
}

progress::-webkit-progress-bar {
  border-radius: 100px;
  background-color: #e7e7e7;
}

progress::-webkit-progress-value {
  border-radius: 100px;
  background-color: #00d252;
}

JS

const progress = document.querySelector('progress');
const percent = document.querySelector('#percent');
let value = 0;

window.setInterval(() => {
  value += 7;
  progress.value = value;
  percent.innerText = `${value} %`;
  if (value >= 100) {
    value = -20;
  }
}, 300);

參考

30 Seconds CSS
CSS 專家密技 @ Will 保哥

Layout 相關​

CSS Resets​

Box-sizing reset​

填滿空間（fill full space）​

撐滿空間（sticky footer）​

水平垂直置中（flexbox-centering）​

清除浮動（clearfix）​

Web UI​

客製化捲軸（Custom Scroll Bar）​

客製化選取文字（Custom Text Selection）​

禁止選取（Disable selection）​

滑順捲到某個位置（Smooth Scroll）​

Button Reset​

CSS 變數（CSS Variables）​

inline-element​

隱藏文字（text hidden）​

超過字數則顯示為 ...​

keywords: text-overflow, ellipsis, text-truncate​

文字左右對齊（需多行時有效）​

keywords: test-justify​

標題左右對齊（單行亦有效）​

keywords: justify, text-justify, 左右對齊​

圖片 RWD 設定​

keywords: image responsive​

背景圖片 RWD 設定（自動調整高度）​

keywords: background image responsive, background image auto height​

其他​

Responsive Video Container​

不要選到最後一個​

Progress bar 進度條​

HTML​

CSS​

JS​

參考​