Our Blog

TVI Blog : 5 CSS Tricks to help you code faster

5 CSS Tricks to help you code faster

CSS is something that I (and millions of web design masterminds) use every day. Some days you love it. Some days? You hate it. But here are 5 CSS tricks to help you work better on the days when you hate it:

Absolute Loves Relative
It’s surprising that this isn’t a well known fact about absolute positioning, but you can nest an Absolutely positioned element inside a Relative one to contain it. An absolutely positioned element without a relative container will use the browser’s viewport to contain it. This is especially useful when floats are just not enough.

Here’s a short description of clearing a float if you don’t already know what it is. Say you have floating divs nested inside an element and at some point in the page you want to have normal, regular divs. Without a clearfix after the floating divs, they will all jumble together. Before CSS3, you’d have to use <div class="clearFix"></div> after the floating objects. Now, and this is nifty. Justdefine clearFix in your stylesheet with these attributes:

.clearFix:after {
content: "";
display: table;
clear: both;

Now you can just append “.clearFix” to the parent of nested, floated objects and it will automatically put a clear element after all the floated divs and make a clearFix.

Box Sizing and You
One of the coolest and newest in CSS3, is Box Sizing. Don’t let the name fool you though, it’s not just for sizing. I use box sizing for absolutely everything in developing sites. Here’s the code, and then I’ll explain it.

*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

This adds these attributes to every declaration in a stylesheet. Before this, say you had a 100px x 100px div and wanted padding and a border on it. If you added a 5px border, the new size of the div would be 110px x 110px. If you added 10px padding to it as well, the new size would be 130px x 130px. A drastic size change from what you originally intended. With the code above, no matter what you add onto the div, it’ll always stay at the desired dimensions. Nifty right? It’ll save a lot of headache when it comes to laying out a page.

Revenge of the Nth
Nth is a very useful attribute in CSS3, You’re probably used to :last-child & :first-child. Now, you can choose any child and any type. It’s pretty straight forward in the beginning: :nth-child(2) will select the second nested child in a list. :nth-child(3) will select the 3rd and so on. But here’s where it gets a bit complicated: you can use mathematical equations to select more than just one element. For example, :nth-child(n+5) will select all BUT the first 4 elements and :nth-child(-n+4) will select only the first 4. nth-child(3n+1) will select every third starting at the first and :nth-child(even) will select all even items in the list. Here’s a nifty tester that you can use by Chris Coyier that will help you to understand a bit more http://css-tricks.com/examples/nth-child-tester/.

Making Inputs Sexy
Forms, I hate styling them, but here’s a bit of code that makes it a bit easier.  input[type=”text”]. This little bit of code when put into a stylesheet can control all input tags with the “text” type. You can also use submit, email, button etc. Now you don’t have to define a class on each input tag.  input[type=”text”] will take care of that for you. But if you ever did want to combine it with a class, all you have to do is  input[type=”text”].yourClass. Pretty simple but highly effective and a great time saver.

One Response

  1. You can find obviously many convincing known reasons for why should you go
    shopping internet based but in addition you must not overlook the crooks hovering over web to locate
    opportunities to loot you.: Be aware of free
    shipping offers – One of the best parts of on line Black Friday shopping
    (besides lacking to deal with the chaos in stores) gets your
    things transported free of charge. If you are done shopping and
    never qualify for free delivery, check how far away you might be from reaching that quantity.

    TIP Tiffany Hart writes for – your internet resource for full figured
    bras from leading brands like Le Mystere, Goddess, Chantelle,
    Freya, Panache and much more. But if you’re utilizing your debit
    card on the internet and somebody gains use of it, they could remove your bank account if your wanting to also find out there’s difficulty.

    It’s likely you will get element of that cash back, but feasible
    that it can simply take some time, which you won’t obtain it all.: Do
    not bet on a table which has had the absolute minimum wager higher than five % of your budget.

    Easy and Best on the web Blackjack Suggestion High buy prices and absence of shopping discount coupons are attributed as factors that result in shopping cart abandonment.