Más contenido relacionado
La actualidad más candente (11)
Similar a CSS3 is Not Magic Pixie Dust (20)
CSS3 is Not Magic Pixie Dust
- 35. Vendor Prefixes
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
-o-border-bottom-left-radius: 4px;
-ms-border-bottom-left-radius: 4px;
-khtml-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
-o-border-bottom-right-radius: 4px;
-ms-border-bottom-right-radius: 4px;
-khtml-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #ffffff), color-
stop(100%, #cccccc));
background-image: -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%);
background-image: linear-gradient(top, #ffffff 0%, #cccccc 100%);
- 37. DRY: Mixins
@mixin inverse-text { #footer {
background-color: black; background-color: black;
color: white; color: white;
} ...
}
#footer {
@include inverse-text; #header {
... background-color: black;
} color: white;
...
#header { }
@include inverse-text;
...
}
SASS CSS
- 38. DRY: Extends
.inverse-text { #footer, #header {
background-color: black; background-color: black;
color: white; color: white;
} }
#footer { #header {
@extends .inverse-text; ...
... }
}
#footer {
#header { ...
@include .inverse-text; }
...
}
SASS CSS
- 41. @mixin razzledazzle {
@include border-radius(4px);
@include box-shadow(black, 0, 1px, 5px);
@include linear-gradient(…);
}
#header {
@include razzledazzle;
…
}
#footer {
@include razzledazzle;
…
}
- 42. #header {
background-image: -webkit-gradient(…);
background-image: -moz-linear-gradient(…);
background-image: linear-gradient(…);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 5px black;
-webkit-box-shadow: 0 1px 5px black;
-o-box-shadow: 0 1px 5px black;
box-shadow: 0 1px 5px black;
…
}
#footer {
background-image: -webkit-gradient(…);
background-image: -moz-linear-gradient(…);
background-image: linear-gradient(…);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 5px black;
-webkit-box-shadow: 0 1px 5px black;
-o-box-shadow: 0 1px 5px black;
box-shadow: 0 1px 5px black;
…
- 43. .razzledazzle {
@include border-radius(4px);
@include box-shadow(black, 0, 1px, 5px);
@include linear-gradient(…);
}
#header {
@extend .razzledazzle;
…
}
#footer {
@extend .razzledazzle;
…
}
- 44. #header, #footer {
background-image: -webkit-gradient(…);
background-image: -moz-linear-gradient(…);
background-image: linear-gradient(…);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 5px black;
-webkit-box-shadow: 0 1px 5px black;
-o-box-shadow: 0 1px 5px black;
box-shadow: 0 1px 5px black;
}
#header {
…
}
#footer {
…
}
- 45. Keep an eye on your CSS.
Vendor prefixes and mixins don’t, er… mix.
Notas del editor
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n