css

Better defaults, please

Blog

I know I'm in the 2% of people who view the web without javascript turned on. I'm know I'm in the n% who turn images off by default in email. I know this.

And even if I didn't, I would still feel uncomfortable with having my text color so close to my background color that it is unreadable without having javascript turned on to adjust the color of the fonts with a font-face:

It's okay to default colors to legible ones. Really.

I think I might need to add this to my Front-End Fast book: test with javascript turned off or otherwise hobbled ("the CDN isn't working and jQuery doesn't load from the Googs, is your website still legible?" sort of thing).

And for anyone looking, yeah, I know that using the center tag isn't cool either. Working on it.

5 + 3 ways to hide an element with CSS

Blog

I had a phone interview today with a company that I am incredibly hopeful to be contracting for shortly. The work is in my area of expertise (hello, Drupal); they seem okay with my request for 20 hours a week for the next 2-3 months (with the understanding that I can ramp up to 40 if needed for a project, as long as I drop back down to 20 as the norm); and I'd be working with a friend I've worked with before. Always a good thing.

In the interview, I was asked, "Using CSS, how many ways can you hide an element? Not from a bot, but from a user. I have been told four, but can remember only three."

I thought about it for a moment, and replied, "I can give you five."

Such the overachiever.

Starting with this layout:

The the five ways I answered:

1. Use the display property.

Make Safari on iOS not screw up your fonts

Snippet

Make Safari on iOS not screw up your fonts:

@media screen and (max-device-width: 480px) { html { -webkit-text-size-adjust: none; } }

Flared tabs

Snippet

Given this HTML:

<ul>
<li><a>123</a>
<li><a>234</a>
<li><a>123</a>
</ul>

... this CSS will give you flared tabs:

body {
    background:#EEE;
}
ul {
    text-align:center;
    background:#FFF;
    padding:10px 0 0;
}
li {
    background:#CCC;
    display:inline-block;
    vertical-align:bottom;
    position:relative;
    line-height:40px;
    border-radius:10px 10px 0 0;
    position:relative;
}
li a {
    line-height:40px;
    display:block;
    padding:0 30px;
}
li a:before,
li a:after,
li:before,
li:after {
    position:absolute;
    content:'';
    bottom:0;
}
li a:before,
li:before {
    background:#CCC;
    width:10px;
    height:10px;
}
 
li a:after,
li:after {
    background:#FFF;
    border-radius:20px;
    height:20px;
    width:20px;
}
li:before,
li:after {
    right:100%;
}
li a:before,
li a:after {
    left:100%;
}
li:nth-child(2) {
    background-color:#EEE;
    z-index:10;
}
li:nth-child(2) a:before,
li:nth-child(2):before {
    background:#EEE;
}
li:nth-child(2) a:after,
li:nth-child(2):after{
    background:#CCC;
}

CSS defaults

Via http://nimbupani.com/safe-css-defaults.html
Property Value
background transparent (transparent stands for rgba(0, 0, 0, 0)) or none or 0 0
border none or 0
border-image none
border-radius 0
box-shadow none
clear none
color No value, so best option is to use inherit to cascade from a parent element’s color value.
content normal
display inline
float none
font normal
height auto
letter-spacing normal
line-height normal
max-width none
max-height none
min-width 0
min-height 0
opacity 1
overflow visible
page-break-inside auto
position static (not relative)
text-shadow none
text-transform none
transform none
transition none
vertical-align baseline
visibility visible
white-space normal
width auto
word-spacing normal
z-index auto (not none or 0)