{"id":11227,"date":"2012-02-28T21:01:28","date_gmt":"2012-02-28T13:01:28","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=11227"},"modified":"2023-08-08T00:06:40","modified_gmt":"2023-08-07T16:06:40","slug":"keep-css3-markup-slim","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/keep-css3-markup-slim\/","title":{"rendered":"Keeping Your CSS3 Code Markup Slim"},"content":{"rendered":"

Web developers can save a lot of time using more sophisticated CSS3 syntax. Users who visit your page are expecting the fastest possible load time<\/a> \u2013 which makes it your responsibility to keep file sizes down. There are plenty of shorthand tricks with CSS and especially under the new CSS3 model<\/a>.<\/p>\n

I have put together a few of these ideas in the guide below. We should also touch upon other areas such as minifying your CSS code. There are in-browser tools available to aid developers in the styling process but you would want to combine shortcodes with this file-size reduction to ultimately streamline the rendering process of your website.<\/p>\n

Basic Tips on Formatting<\/h2>\n

Before we jump into the actual CSS syntax I want to go over the topic of how<\/a><\/em> to write your CSS<\/a>. If you\u2019re any bit familiar with web design, you\u2019ve likely seen a stylesheet before, probably more than once. The first part of each command is called the selector<\/strong>. This targets the type of element which will receive the styles added inside the curly braces, also known as properties<\/strong>.<\/p>\n

\"CSS3<\/figure>\n

Inline Level<\/h3>\n

With inline styles each property is written one after the other with only spaces to separate them. This method is best applied onto selectors where you only need a couple of properties. It will save you space on the page and scrolling through your stylesheet will be much quicker. In case you\u2019ve never encountered inline CSS before, I\u2019ve added a small example below targeting HTML anchor links.<\/p>\n

a {\r\n  color: #648cc8;\r\n  font-weight: bold;\r\n}\r\n\r\na:hover {\r\n  color: #739cda;\r\n  text-decoration: none;\r\n}\r\n\r\na.alt {\r\n  color: #bd4949 !important;\r\n}<\/pre>\n
Block Level<\/h3>\n
On the other hand block-style properties are entered in one line per key\/value pair and are often indented for quicker edits when scanning the code. About 99% of the cleaner stylesheets I run into use this formatting, and it has become an industry standard to many designers. If your selector is using more than 6 or 7 properties this is the best formatting to apply.<\/p>\n
When you take into consideration the many new CSS3 properties, you also realize just how quickly your stylesheets fill up. And many of these properties support browser-specific copies which require almost duplicate code entries(such as border radius). You can check out my example of a block property set below targeting a sample wrapper div.<\/p>\n
.wrap {\r\n  display: block;\r\n  padding: 6px 10px;\r\n  background: #FFF;\r\n  border-radius: 4px;\r\n  -moz-border-radius: 4px;\r\n  -webkit-border-radius: 4px;\r\n  -o-border-radius: 4px;\r\n}\r\n<\/pre>\n
Neither way of writing CSS is specifically better than the other. Ultimately it is your choice as a developer which style you prefer, and even this will according to the project you work on. It\u2019s even common to find CSS where designers have mixed both together! I personally feel that \u201cworks in progress\u201d tend to be easier with block-styles since I\u2019m constantly examining the stylesheet to make edits or additions. But for traffic-heavy domains minifying your CSS<\/a> file is the absolute best way to go.<\/p>\n
Keeping Them Slim<\/h2>\n
By utilizing the many short codes available in CSS3 you can save a lot of development time. Editing HTML elements will become a lot easier as you understand this time-saving lingo. Additionally your code will appear more clean-cut and easier to look at.<\/p>\n
The only downside is that not all browsers fully support these properties. There are workarounds for many of the existing issues such as in Internet Explorer and Netscape. Thankfully the Web is always progressing forward and as CSS3 grows in popularity, we will undoubtedly experience a growth in browser compatibility too.<\/p>\n
RGBa Color Transparency\/Opacity<\/h3>\n
The new RGBavalue isn\u2019t exactly a CSS3 property<\/strong>, but alpha transparency is specific to CSS3 only<\/strong>. Instead of the common \u201cRed Green Blue\u201d values you pass in for color you may now include a fourth option of color transparency<\/strong>. Because of this, web developers are done with transparent PNGs almost entirely.<\/p>\n
The basic syntax requires a value from 0-255 in the first three(3) slots and 0\u20131.0 in the alpha position. The color range is specific for how much of each hue (RGB) is visible with 0 being nothing and 255 full.<\/p>\n
 div { background: rgba(255, 255, 255, 0.3); }<\/pre>\n
Cross-browser compatibility<\/strong><\/p>\n
Another property opacity<\/code> can be used in some circumstances. However this will affect the whole HTML element and inner content, not just the background as you saw in my example.<\/p>\n
Unfortunately Internet Explorer does not support the RGBa color value as of yet. You should generally include a fallback property with full opacity for these less-standard browsers. You set this up with the same values but excluding the 4th(opacity). It would look something like rgba(255, 255, 255)<\/code><\/p>\n
Additionally Internet Explorer can be handled a bit more gracefully through conditionals. You can actually check if the browser is running IE and display a proprietary Microsoft CSS filter on command. I\u2019ve demonstrated this in my example below (note this would appear somewhere in your HTML file):<\/p>\n
\r\n<!--[if IE]>\r\n<style type=\"text\/css\">\r\n.bg {\r\n  background: transparent;\r\n  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff);\r\n}\r\n<\/style>\r\n<![endif]-->\r\n<\/pre>\n
CSS3 Border Radius<\/h3>\n
I have read a few confusing forum threads about creating rounded borders with CSS3 \u2013 not so much on the side of how it\u2019s done, but with finicky browser support, web developers are scrambling for the easiest code to drop in and function as expected.<\/p>\n
border-radius: top-left top-right bottom-right bottom-left;\r\n<\/pre>\n
The border-radius<\/code> property shares similar syntax to creating a standard border, except in this case we\u2019re targeting the box corners. This property will actually accept 1 \u2013 4 values and they each target a different setup of corners.<\/p>\n