There has been a lot of discussion over the last couple of months about other browsers implementing support of the CSS -webkit- vendor prefix, and this week an unidentified source told .net magazine that Opera have confirmed implementation of the -webkit- prefix.
Many developers are concerned. If other browsers start implementing CSS vendor prefixes other than their own, and implementing them in different ways (as often different browsers do), then surely that defeats the point of vendor prefixes entirely? The point of vendor prefixes was to ensure new, experimental CSS features are completely interoperable before standardised support was introduced. Some developers were initially against them, but most forward-thinking developers should now be used to using them to ensure the best cross-browser compatibility possible. Yes, it means we end up writing pretty much the same property declaration five or so times, but unfortunately that’s the way it is. Vendor prefixes are the best solution for us to be able to use experimental CSS properties now.
Developed by Alexis Sellier, the LESS dynamic stylesheet language is a great tool for anyone who hand-codes CSS on their websites. It will help you manage them better and increase your productivity by being able to write them quicker.
If you are new to LESS, don’t worry; there isn’t a whole new language to learn, just some extentions to CSS that provide some very helpful features. I’ve just converted my stylesheets to use LESS, and it’s really easy to pick up. LESS is so-called for a reason; you will end up writing less code. My original stylesheet was 19,503 characters, and after using LESS, it was only 13,286. That’s over 6,000 fewer keystrokes.
The LESS website documents all the features available in detail, but I’ll go through a few of my favourites here, and how I’ve used them.
I posted this article on the 12412 project’s website as well. For those who are unaware of what the project is, a short explanation from their website: “2012 is shaping up to be an exciting year on the web and we’d like to help you get the most out of it with a personal learning challenge — to experience 12 new technologies over the course of the year.”
I’ve decided to join in with the 12412 project. I’m a little late, but to be fair, I only found out about it a few weeks ago. I am always interested in furthering my knowledge of web technologies, so when I discovered the 12412 project, I was keen to get on board.
I'm sure many people have wanted to be able to customise the bullet icons used in a standard unordered list — I know I have in the past, and had to once again recently, so I've found a solution.
The default solid bullet point can be changed to a number of things using the CSS property list-style-type, such a a circle or square. But with this, you are limited to a few options, and you can't really customise the list style much; for example, if you change the colour of your list item text (by styling the <li>), the bullets inherit this colour too.
The company I work for have numerous Twitter accounts for the various parts of the business, and wanted these feeds to show on the respective websites. I had done something similar to this in the past but had faced problems then with Twitter's request limit (which I believe is around 150 requests an hour). This caused the feed to disappear until the limit reset. I decided to look into writing a reliable solution for this.
I am a bit behind when it comes to developing websites for mobile platforms I’ve only recently jumped on the iPhone bandwagon, so have come to appreciate when designers and developers spend the time to make a mobile-friendly version on their websites.
I am currently in the process of redesigning and updating the content management systems of the websites for the company that I currently work as an in-house web designer/developer/administrator. I came to realise that certain aspects of the new website (and the terrible, current one) would not logically make sense when using a mobile device such as an iPhone or an iPad – in particular elements that require the user to hover over an aspect of the site. You cannot hover when using an iPhone, so I would have to rethink these parts of the website. I decided to construct a mobile version of the website, which surprisingly didn’t take very long.
Most people add a colon to the end of the label text in a form, even though I don't think it is necessary. Let's say you have many large forms across your website and need to add colons to all the labels. Instead of manually adding them, you can use CSS alone.