The Sass extend directive can improve your workflow. Nick Walsh explains how to implement the CSS preprocessor component without bloat.
Watching a CSS veteran discover Sass for the first time is always entertaining. Concepts like nesting, variables and mixins seem so natural and, once the syntax is committed to memory, it’s difficult to remember a time before their availability. Relief is the most common emotion: a recognition that the days of manually prefixing and copying hexadecimal values have passed.
Of the core concepts found in the preprocessor @extend stands out for three reasons: it has the highest potential to drastically change your workflow; misuse is dangerous to the health of your stylesheet; and newcomers struggle with it far more than other Sass functionality. Follow the accompanying patterns to start safely utilising @extend.
Several methods have emerged to help designers write scalable and modular HTML and CSS. Freelance web designer Steven Bradley presents an overview of four.
Modular code is reusable code. It can be combined in a variety of ways, making it flexible and scalable, allowing you to iterate code blocks independently and leading to better performance and more maintainable sites.
WebKit now supports the srcset attribute, making it easier to deliver high resolution images to high resolution displays without inconveniencing anyone else.
The srcset attribute is similar to the
-webkit-image-set CSS function, in that it uses 1x, 2x, 3x modifiers to tell the browser which image to choose. For example, the 2x modifier marks the image that should be used if the display has more than two device pixels per CSS pixel. A blog post from WebKit.org explains that the srcset attribute can be thought of as “the markup equivalent to the CSS feature”.
Basically HTML5 has it’s many new syntactical features, which include the <video>, <audio>, and <canvas> elements, as well as the integration of SVG content. Due to these new elements, it will be very easy to integrate multimedia and graphical content to web without using flash and third party plugins. There are also another new elements like <section>, <article>, <header> and <nav> which enrich the semantic value of the document. Other major advantages of HTML5 are described below. Read the rest of this entry