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

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'".')" */

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

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

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

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

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

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

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

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

.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

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

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

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

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

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

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

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

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;

image-rendering: -webkit-optimize-contrast;

 will work on Chrome. However, it will still using image original 

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

.banner {
  padding: 56.25% 0 0;
  position: relative;
}
.banner > img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

CSS

body size

remove select default style

add placeholder for input[date]

disable text selection

iPhone tap highlight color

smooth scroll

not show scrollbar

disable 300ms delay

center a block

blur the image

css transation

remove the default shadow style of bootstrap

ellipsis

ellipsis the text after 3lines

iPhone Safari minimal-ui

prevent event

create toggle

width auto fit

flex

change radio to button

center image

right align overflow text

Blurry downscaled images in Chrome

Image ratio error on safari

Percentage ratio layout