Yes you can use them, for example I use them to more easily style groups of data, like this: thead th { width: 100px; border-bottom: solid 1px #ddd; font-weight: bold; } tbody:nth-child(odd) { background: #f5f5f5; border: solid 1px #ddd; } tbody:nth-child(even) { background: #e5e5e5; border: solid 1px #ddd; } <table> <thead> <tr><th>Customer</th><th>Order</th><th>Month</th></tr> </thead> <tbody> <tr><td>Customer … Read more
Why are they using <i> tag to display icons ? Because it is: Short i stands for icon (although not in HTML) Is it not a bad practice ? Awful practice. It is a triumph of performance over semantics.
Set box-sizing property to border-box: div { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; width: 100px; height: 100px; border: 20px solid #f00; background: #00f; margin: 10px; } div + div { border: 10px solid red; } <div>Hello!</div> <div>Hello!</div> It works on IE8 & above.
Maybe this will be helpful <select> <option disabled selected value> — select an option — </option> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> — select an option — Will be displayed by default. But if you choose an option, you will not be able to select it back. You can also hide it using by … Read more
tl;dr Vertical align middle works, but you will have to use table-cell on your parent element and inline-block on the child. This solution is not going to work in IE6 & 7. Yours is the safer way to go for those. But since you tagged your question with CSS3 and HTML5 I was thinking that … Read more
The following works for me in Internet Explorer. Note the addition of the table-layout:fixed CSS attribute td { border: 1px solid; } <table style=”table-layout: fixed; width: 100%”> <tr> <td style=”word-wrap: break-word”> LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord </td> </tr> </table>
You can use filters with -webkit-filter and filter: Filters are relatively new to browsers but supported in over 90% of browsers according to the following CanIUse table: https://caniuse.com/#feat=css-filters You can change an image to grayscale, sepia and lot more (look at the example). So you can now change the color of a PNG file with … Read more
The solution to this is actually very easy, but not at all obvious. You have to trigger something called a “block formatting context” (BFC), which interacts with floats in a specific way. Just take that second div, remove the float, and give it overflow:hidden instead. Any overflow value other than visible makes the block it’s … Read more
I played with it for a bit because I had trouble figuring it out. You need to set the cell width (either th or td worked, I set both) AND set the table-layout to fixed. For some reason, the cell width seems to only stay fixed if the table width is set, too (I think … Read more
You can use the pattern attribute. The required attribute is also needed, otherwise an input field with an empty value will be excluded from constraint validation. <input pattern=”.{3,}” required title=”3 characters minimum”> <input pattern=”.{5,10}” required title=”5 to 10 characters”> If you want to create the option to use the pattern for “empty, or minimum length”, … Read more