New website uses CSS3 features
My old website
Welcome to my new website/blog. Yes, it was about time to do something new and here it is. Nowadays, everyone is like publishing stuff using a blog, his/her twitter or facebook account and many more uninteresting ways to express themselves – and from now on – I will do that too! Web 2.0 got public – everyone is doing it – and so am I.
I moved all my contents from my static HTML website (which was in fact an offline CMS generating static HTML files (RapidWeaver)) to WordPress and I am glad that it fulfilled all my wishes of a modern web content management system. It has been more than a year since I have last worked with OpenSource CMS like Joomla, Drupal and yes, even WordPress. But they were way too buggy and did not provide the functionality that I needed… until now. After trying WordPress 2.8.2, I was amazed how great this product became and decided to migrate the contents from my old website to this software.
Google Android
Let’s don’t talk about the past – let’s talk about the future. What are you going to see on this website? I will provide you with the latest information about the Google Android phones, JAVA development articles, that I find very interesting and useful, topics about photography as well as the latest photos of my photo sessions and also any interesting information about Apple (including the iPhone which in fact I don’t really like). You can of course subscribe to the RSS feed which is provided by this site. I did not run any huge browser interoperability tests, but they will follow soon – this site should look fine in Safari and FireFox 3.5, though. Of course, I am also going to post personal impressions of any technology (software, programming languages & hardware) that I test, to keep you informed about how I think about them – and to be honest – I don’t care whether you’re interested in that or not – you don’t have to read it. =)
As the title states, this website currently uses CSS3 features and will support HTML5 features soon as well. Although HTML5 is not a standard yet (it won’t be ready until the year 2022!), the latest browsers do support these features (e.g. FireFox 3.5, Safari 4.0, Opera 9.x, IE8, Google Chrome) which is the reason why I am using this page as my personal HTML5-Dojo-CSS3 playground. By today I have two features implemented which I’m going to explain you now:
1. [CSS3] Attribute Selectors (see: W3C documentation)
Attribute selectors allow you to target an element based upon its ‘attribute’. So in my case I’m using this feature to a) highlight external links and b) highlight several file extensions that when used in an anchor tag.
The following CSS3 code will a ‘
‘ right after the link, because it recognizes this link as an external link by checking the “target=’_blank’” attribute:
a[target="_blank"] {
background:transparent url(img/ext.gif) no-repeat scroll right center;
padding-right:16px;
}
Secondly, I am also checking the file extension of a linked file and if it is a PDF document, I will print the pdf icon ‘
‘:
a[href$=".pdf"] {
background:transparent url(img/pdf.gif) no-repeat scroll right center;
padding-right:16px;
}
Example: CSS3 Cheat Sheet
My CSS will handle that automatically and I don’t have to care about any icons anymore. If you don’t see the these icons right after the links, you’re browser is not CSS3 compatible.
As soon as I have some valid use cases for some HTML5 features I will add them to this theme as well.
Until then – enjoy your trip through my website.
