@media only screen and (min-width : 1025px) {
    /* divices più grandi di 1024 */
}
@media only screen and (max-width : 1024px) {
    /* devices più piccoli di 1024 */
}

standard device MediaQuery

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
 
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
 
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
 
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
 
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
 
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
 
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
 
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

gradient

background: -webkit-linear-gradient(90deg, #f857a6 10%, #ff5858 90%); /* Chrome 10+, Saf5.1+ */
background:    -moz-linear-gradient(90deg, #f857a6 10%, #ff5858 90%); /* FF3.6+ */
background:     -ms-linear-gradient(90deg, #f857a6 10%, #ff5858 90%); /* IE10 */
background:      -o-linear-gradient(90deg, #f857a6 10%, #ff5858 90%); /* Opera 11.10+ */
background:         linear-gradient(90deg, #f857a6 10%, #ff5858 90%); /* W3C */

shadow

 
/* per testo */
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
 
/* per elementi box */
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); */
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);

layout

flexbox 

  <body>
    <div class="layout2p-container">
      <div class="layout2p-lpane">...</div>
      <div class="layout2p-rpane">...</div>
    </div>
  </body>
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.layout2p-container {
  display: flex;
  flex: 1;
}
.layout2p-lpane {
    flex: 0 0 12em;
    flex: -1;
    background-color: #999;
}
.layout2p-rpane {
    flex: 1;
}
<code>
 
==== GPU acceleration ====
this causes the content of the HTML DOM element to be uploaded on the GPU for rendering.
In many cases, the GPU upload time is imperceptible, and the results are positive.
* Do not use this for every case, and on every HTML DOM element.
* if you apply the translate3d style to a very large and very complex HTML DOM element, a noticeable delay can be encountered.
* avoid nesting DOM elements that use translate3d
The maximum texture size on many mobile devices is 1024×1024, but varies by platform.
The maximum texture size on an iPad 2 is 2048×2048, where the maximum texture on the iPad 3/4 is 4096×4096.
If the device maximum texture size is 1024, and you DOM element's height is 1025 pixels,
you will have those pesky flickering and performance issues.
<code css>
transform: translate3d(0,0,0);

animation

@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
@-webkit-keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
.blink {
    animation:fade 3000ms infinite;
    -webkit-animation:fade 3000ms infinite;
}

box sizing

http://www.html.it/pag/19463/box-sizing/ 

// Use box sizing on all the things!
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

transition

funziona da IE10+

div {
  width: 200px;
  height: 200px;
  background-color: 98d925#;
  transition-property: background-color; /*standard*/
  transition-duration: 2s;
  -webkit-transition-property: background-color; /*Safari e Chrome */
  -webkit-transition-duration: 2s;
  -o-transition-property: background-color;      /*Opera*/
  -o-transition-duration: 2s;
  -moz-transition-property: background-color;    /*Firefox*/
  -moz-transition-duration: 2s;
}
div:hover {
  background-color: #ff5c00;
}

@see mixin

transition-property('background-color');
transition-duration(2s);

transform e animations

  • ruotare elementi, funziona da IE9+
  • anmation funziona da IE10+

font antialis 

-webkit-font-smoothing: subpixel-antialiased;