返回文章

文章 2018

CSS

早期的 CSS 记录

CSSNotebook
本文目录25
  1. body size
  2. remove select default style
  3. add placeholder for input[date]
  4. disable text selection
  5. iPhone tap highlight color
  6. smooth scroll
  7. not show scrollbar
  8. disable 300ms delay
  9. center a block
  10. blur the image
  11. css transation
  12. remove the default shadow style of bootstrap
  13. ellipsis
  14. ellipsis the text after 3lines
  15. iPhone Safari minimal-ui
  16. prevent event
  17. create toggle
  18. width auto fit
  19. flex
  20. change radio to button
  21. center image
  22. right align overflow text
  23. Blurry downscaled images in Chrome
  24. Image ratio error on safari
  25. Percentage ratio layout

body size

css
html,
body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

remove select default style

css
-webkit-appearance: none;

add placeholder for input[date]

css
input[type='month']::before {
  color: #999999;
  content: attr(placeholder);
}

input[type='month'] {
  color: #ffffff;
}

input[type='month']:focus,
input[type='date']:valid {
  color: #666666;
}

input[type='month']:focus::before,
input[type='date']:valid::before {
  content: '' !important;
}

/* onblur="(this.type='."'text'".')" onfocus="(this.type='."'time'".')" oninput="(this.type='."'text'".')" onchange="(this.type='."'text'".')" */

disable text selection

css
* {
  -webkit-user-select: none;
  -moz-user-select: none;
}

input {
  -webkit-user-select: text;
  -moz-user-select: text;
}

iPhone tap highlight color

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

smooth scroll

css
.affix {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

not show scrollbar

css
#element::-webkit-scrollbar {
  display: none;
}

disable 300ms delay

css
button {
  -ms-touch-action: none;
  ####IE10 touch-action: none;
  ####IE11;
}

center a block

css
#dropDownIcon {
  position: absolute;
  left: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

blur the image

css
.storeNavBg {
  width: 100%;
  height: 19rem;
  background-repeat: no-repeat;
  position: fixed;
  background-size: 100% 100%;
  filter: blur(10px);
}

css transation

css
.shoppingCart.open > .cartMask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(100vh - 4.2rem);
  background-color: #000;
  opacity: 0.4;
}

.shoppingCart > .cartMask {
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  ####for safari transition: opacity 0.3s ease;
}

remove the default shadow style of bootstrap

css
#searchKey:focus {
  transition: border linear 0.2s, box-shadow linear 0.5s;
  -moz-transition: border linear 0.2s, -moz-box-shadow linear 0.5s;
  -webkit-transition: border linear 0.2s, -webkit-box-shadow linear 0.5s;
  outline: none;
  border-color: rgba(239, 190, 95, 0.75);
  box-shadow: 0 0 8px rgba(239, 190, 95, 0.105);
  -moz-box-shadow: 0 0 8px rgba(239, 190, 95, 0.5);
  -webkit-box-shadow: 0 0 8px rgba(239, 190, 95, 3);
}

ellipsis

css
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

ellipsis the text after 3lines

css
li.foodCat a span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}

iPhone Safari minimal-ui

text
flipping from portrait to landscape

prevent event

css
pointer-events: none;

create toggle

http://www.w3schools.com/howto/howto_css_switch.asp

width auto fit

css
.grid {
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
}
.col {
  padding: 30px;
}
.fluid {
  flex: 1;
  background-color: #ccc;
}
.fixed {
  background-color: yellow;
}

flex

css
#area-category .menu-first-group {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  vertical-align: baseline;
  width: 100%;
  margin: 1rem 0.2rem;
}

#area-category .menu-first-btn {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

change radio to button

css
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;

center image

css
max-width: 100% !important;
max-height: 100% !important;
height: auto !important;
width: auto !important;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

right align overflow text

css
white-space: nowrap;
direction: rtl;

Blurry downscaled images in Chrome

css
image-rendering: -webkit-optimize-contrast;

Image ratio error on safari

Resize image(keep ratio) by max-width will work on Chrome. However, it will still using image original height on some browser, such as Safari.

Percentage ratio layout

https://www.zhangxinxu.com/wordpress/2017/08/css-percent-padding-image-layout/

css
.banner {
  padding: 56.25% 0 0;
  position: relative;
}
.banner > img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
返回首页
上一篇必读系列下一篇jQuery

Discussion

留言与讨论

想法、补充和不同意见都欢迎。