CSS Browser Cheats

csscheats.md

Shali's CSS Browser Cheats

Targetting iPhone, Android, iPad and tablets with media queries

/* iPhone 5 and newer (landscape) + Androids */
@media all and (max-width: 568px), only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
  .mobile-only {
    display:block;
  }
  td.mobile-only {
    display:table-cell;
  }
  .desktop-only {
    display:none;
  }
}

/* iPhone 4 and older (landscape), most Androids */
@media only screen and (max-device-width: 480px) {
  .class {
    display:block;
  }
}

/* iPhone 4 and older (landscape), most Androids ** ALT if you want visible in browser */
@media all and (max-width: 480px) {
  .class {
    display:block;
  }
}

/* iPhone 4 and older (portrait), most Androids */
@media only screen and (max-device-width: 320px) {
  .class {
    display:block;
  }
}

/* iPhone 4 and older (portrait), most Androids ** ALT if you want visible in browser */
@media all and (max-width: 320px) {
  .class {
    display:block;
  }
}

/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .class {
    display:block;
  }
}

/* Desktop overrides */
@media all and (min-width: 568px) and (min-device-width: 769px) {
  .mobile-only {
    display:none;
  }
  .desktop-only {
    display:block;
  }
  .btn.desktop-only {
    display:inline;
  }
  th.desktop-only,td.desktop-only {
    display:table-cell;
  }
}

/* Android Devices */
/* Put CSS for low density (ldpi) Android layouts in here */
@media only screen and (-webkit-device-pixel-ratio:.75){
  .class {
    display:block;
  }    
}
/* Put CSS for medium density (mdpi) Android layouts in here */
@media only screen and (-webkit-device-pixel-ratio:1){
  .class {
    display:block;
  }
}
/* Put CSS for high density (hdpi) Android layouts in here */
@media only screen and (-webkit-device-pixel-ratio:1.5){
  .class {
    display:block;
  }
}

Before and After in IE8 vs other browsers

StackOverflow Ref

/* IE9+ and other browsers */
.addBeforeClass::before {
  content: "Something";
}
.addAfterClass::after {
  content: "Something";
}

/* IE8 */
.addBeforeClass:before {
  content: 'Something';
}
.addAfterClass:after {
  content: 'Something';
}

first:child, last:child in IE8 vs other browsers

StackOverflow Ref

/* IE9+ and other browsers */
ul li:first-child p {
  display:block;
}

ul li:last-child {
  display:none;
}

/* IE8 -- IE8 does NOT support last-child */
ul li:first-child + p {
  display:block;
}

Transitions and transform

Ref

/* Transition */
input {
  width:50%;
  -moz-transition:width .5s;
  -webkit-transition:width .5s;
  -o-transition:width .5s;
  transition:width .5s;
}
input:focus {
  width:100%;
}

/* Transform */
.box {
  display: block;
  width: 100px;
  height: 100px;
  background-color: #000;
  -moz-transition:-moz-transform 2s;
  -webkit-transition:-webkit-transform 2s;
  -o-transition:-o-transform 2s;
  transition:transform 2s;
}
.box:hover {
  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  transform:rotate(180deg);
}

Animations

/* Animations */
@-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);transform: rotate(0deg); } to { -webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);transform: rotate(360deg); }  }
   @-moz-keyframes rotate { from { -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);transform: rotate(0deg); } to { -webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);transform: rotate(360deg); }  }
    @-ms-keyframes rotate { from { -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);transform: rotate(0deg); } to { -webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);transform: rotate(360deg); }  }
     @-o-keyframes rotate { from { -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);transform: rotate(0deg); } to { -webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);transform: rotate(360deg); }  }
        @keyframes rotate { from { -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);transform: rotate(0deg); } to { -webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);transform: rotate(360deg); }  }

/* Rotate forever */
.rotate {
  -webkit-animation: rotate 3s linear infinite;
   -moz-animation: rotate 3s linear infinite;
    -ms-animation: rotate 3s linear infinite;
     -o-animation: rotate 3s linear infinite;
        animation: rotate 3s linear infinite;
}

/* Rotate and alternate (back and forth) */
.rotate-alternate {
  -webkit-animation: rotate 3s linear infinite alternate;
   -moz-animation: rotate 3s linear infinite alternate;
    -ms-animation: rotate 3s linear infinite alternate;
     -o-animation: rotate 3s linear infinite alternate;
        animation: rotate 3s linear infinite alternate;
}
/* Rotate once */
.rotate-once {
  -webkit-animation: rotate 3s linear;
   -moz-animation: rotate 3s linear;
    -ms-animation: rotate 3s linear;
     -o-animation: rotate 3s linear;
        animation: rotate 3s linear;
    -webkit-animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
      -ms-animation-fill-mode: forwards;
       -o-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

Transitions with Compass

Compass Ref

.transition {
  @include transition(border-bottom-color 0.3s ease-in, color 0.35s ease-out);
}
.single-transition {
  @include single-transition(color, 0.5s, ease-in-out, 0);
}