Last week we launched FindMeByIP.com, a simple app which reveals your browsers' support for CSS3 and HTML5 features in an easy to read format using Modernizr.We've had a great response and we're going to be implementing some of your feedbackin the near future.UPDATE: Check out our Web Designers' HTML5 & CSS3 ChecklistFor now though I thought people mind find it useful to know the state of support in the current browser market.  I've taken all the A-Grade browsers and tested them one-by-one for their feature support . Needless to say it's produce...

Almost all web browsers(including the dinosaur browser IE6) support the web font property @font-face. Its usage is:@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */}Now we are entering the modern web browser age, the WOFF format of font is supported extensively, so now we usually...

Writing consistent and readable CSS that will scale well is a challenging process. Especially when the style sheets are getting larger, more complex, and harder to maintain. One of the tools available to developers to write better CSS are preprocessors. A preprocessor is a program that takes one type of data and converts it to another type of data, and in our case CSS preprocessors are preprocessing languages which are compiled to CSS. There are many CSS preprocessors that front-end developers are recommending and using, but in this article we will focus on Sass. Let’s see what...

With the rise of both very large screens and mobile devices, web developers have to be able to create websites that display correctly and look good whatever the device is. Sure, you can use good old techniques like fluid layouts, but I’ve got something better to show you today. This tutorial will teach you how you can create an adaptable website layout using CSS3.Getting startedView demo (Horizontally resize your browser to view it in action)Download filesCreating the default layoutThe first step of this tutorial is obviously to create a HTML page. I chose to make a simple HTML5 pa...

CSS's :has is a pseudo-class representing an element if any of the selectors passed as parameters matching at least one element. From the name, it's also easy to understand how it matches elements.The syntax is pretty easy as well::has([some-selector])With this pseudo class, it can do lots of things which previously would be challenging or need tweaking the DOM elements with JavaScript. This post will demonstrate what :has can be used for.IntroductionBelow are a few simple examples on how it works.If wanna select all children with img in element a, can havea:has(> img)If wann...

CSS Flexbox is a layout module that makes it easier to create flexible and responsive layouts in CSS. It provides a simple and powerful way to align elements within a container and distribute space between them.To use flexbox, you need to set the display property of an element to "flex". You can do this by adding the following rule to your CSS:.container { display: flex;}The flex container will now have two main axes: the main axis and the cross axis. By default, the main axis runs horizontally and the cross axis runs vertically. You can change this by setting the flex-direction property:.con...

Creating a web scraper is no easy task. This is because it requires precision to identify the specific data points that we intend to collect for the end goal we are working towards. Whether we are looking to create a marketing content database or analyze market trends, the last thing we need from our scraper is for it to return a lot of unnecessary data that will not help our cause.To avoid the inconvenience of going through huge amounts of data to get what we requested, it is crucial to plan beforehand and include a parser in our web scraper. This is where CSS selectors come in, as they ...