Code needed to make <input type="search"> look exactly like type="text".
input[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
Writing single-line CSS is not a matter of preference.
Single-line CSS is not your preference – it’s a shitty way to code, debug and optimize and I’m gonna prove it to you right now.
Your arguments go like this:
Just because you can skip whitespace in CSS, doesn’t mean you should. Sure, you are a smart cookie and you can read it very quickly, breaking long chains of well-known properties and their values in real time. CSS is rather easy.
Let’s switch gears for a while. Look at this JavaScript:
for (var l,i=0;i<10;i++){l=(i % 2)?'even':'odd';}
It’s perfectly valid and passes JSLint too. Ok, you probably know JavaScript well. Let’s try something else.
(1..16).map { |x| (1..16).map { |y| (1..16).map { |z| [x,y,z] if x**2 + y**2 == z**2} } }.reduce(:+).reduce(:+).compact
I hope one day you will have to work with stuff like this so you can understand that unreadable code is always bad code, even if it executes.
Probably, but the quality suffers.
I have seen many stylesheets in countless projects and those with single-line rules are almost always full of redundant selectors and redeclared properties. I’m talking about this:
.footer li h3 { margin: 0 0 6px; font-weight: bold; display: inline; color: #e92e2e; }
.footer li h3 a { font-weight: normal; font-size: 1em; color: #e92e2e; }
Color property should be declared like this:
.footer li h3,
.footer li h3 a {
color: #e92e2e;
}
.footer li h3…
When you write CSS, you need to constantly optimize. You have to reorder selectors, move properties around and shrink rulesets while new functionality is being added. You can’t just move to the bottom of file, dump and overwrite.
Single-line CSS is quicker to write when you stop caring about stuff you already coded. If you don’t remember what you code, you will end up with repetitions and bloat.
Only vertically. Horizontally you have many, many problems:
All of this doesn’t really matter, though. Tell me: why on Earth would you force a coding style on your peers to compensate for your shitty editor?
There are many text editors and IDEs that will take care about screen estate. Editors that can collapse unused rules or sections. Editors with project inspectors, allowing you to jump to particular selector. Or those that have powerful, tweakable capabilities.
Really. You want to compress front-end code by hand, while developing the site / application. Do you omit spaces after periods in sentences too?
Learn what minimization means and how you can do it automatically in production environment. If you have no idea how to do it yourself, your back-end guy or sysadmin will help. And if you’re a one-man-army, just Google around and use some online tools at the very end. On a copy.
It will probably be the first thing I do when I must edit your code. Make no mistake – it’s not a solution, this is me fixing your shit. You don’t ask people to use Tidy on your HTML before making back-end templates, do you?
First, you should read about lizard brain. Second, realize that your coding style will interfere with efficiency of your co-workers. Even if you end up with someone who also writes single-line CSS, her style might be different. She may be using OOCSS approach (however strange that would be for such a messy person) and she will curse you under her breath for your screen-long selectors.
You may indeed like it, but if you ever need to work with someone else and produce high-quality code, this is not how you do it. In team environment single-line CSS will be the first reason for pouring coffee on your new MacBook.
If you’re a lone hunter, do what you like. Browse 4chan, smoke, have 5 espressos a day, whatever. But don’t tell me I should not criticize you for writing single-line CSS. If I care enough to do this, you probably deserve to be better than you are right now.
Image replacement is as old as CSS tips and tricks posted online. Here’s a list of available techniques. Recently I’ve become particularly interested in the Gilder/Levin method. It uses additional span element, positioned over the parent. This span then gets background-image treatment, covering underlying text.
I normally use it like this:
<h1>Futurama <span></span></h1>
h1 {
position: relative;
width: 256px;
height: 133px;
}
h1 span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("image.png") no-repeat;
}
Why do I bother? This is the only (sane) method allowing images to be disabled or not downloaded at all. And why would I care about this?
It’s all good and I use it all the time for logo elements (headings usually get @font-face anyway). The only thing that bugs me is that additional span element. Today I learned how to get rid of it.
Note: In my daily work I support only modern browsers (including IE8), so if you need to support earlier versions of Firefox (3.0) or IE 4.0, stop reading. ;)
Code looks like this:
<h1>Futurama</h1>
h1 {
position: relative;
width: 256px;
height: 133px;
}
h1:after {
content: url("image.png");
position: absolute;
left: 0;
top: 0;
}
Test it here, works like a charm. I used content: url() by purpose – there is a strange bug that won’t allow text to be covered in IE8 just by using background-image. Image must have the same dimensions as parent element or you must clip it adding overflow: hidden to h1.
If you have any comments and/or improvements, get in touch.
PS: “CSS3” in the title refers to the ability to position generated content (which was indeed introduced in CSS2). Don’t send angry emails. :)
Tracking stuff you’ve created on Twitter can be difficult due to tons of spam, useless retweets and hashtag memes. This is what I had to type into Twitter’s search box:
Quicksand http -RT -youtu -♫ -“now playing” -nowplaying -lastfm -“lady gaga” -“britney spears”
Mrs Spears and Gaga are specific to this query, but the rest may come handy in every search. If the project is new and everyone’s getting excited, you may want to delete “-RT” to see an avalanche of tweets.
If there’s one reason for doing most of the interface design work in Photoshop, it’s gotta be its “Layer Styles”. For those of you living under a rock, Layer Styles allow to add dynamic—duh—layers like shadows, gradients and borders to any bitmap. Combine them with vector shapes and the result is pretty versatile.
However, there’s a small shortcoming of this great feature: you can’t edit pixels in any dynamic layer directly. So for example, if you want to erase one side of button’s border, you can’t just do it.
It takes more than that, and I’d like to show you how it’s done properly. We’re gonna use another neat and undervalued feature called Layer Mask.
Because mere theory isn’t fun, let’s attempt to make something (kinda) useful – like recreating Mac OS X’s deafult window resizer. Heaps of fun, I know. I’ve decided to build it without much finesse, by gluing vector rectangles one near another. How you do it isn’t so important, but you should end with something like this: (max zoom)
To make it look realistic, we need another three lines of white semitransparent pixels. This is where Layer Styles kick in. Choose Drop Shadow from 
menu and tweak values to resemble this:
These settings will create a 1px drop shadow (without any blur), like this:
As you can see now, the shadow appears underneath every pixel. We don’t want that. Choose menu Layer → Layer Mask → Reveal All (or click 
). Layer’s icon will change to 
. Then pick Pencil Tool (1px) and draw a straight black line, in this area: (red was used just for presentation)
You’ll notice that a part of the layer has disappeared, but it’s still not perfect. To correct it, choose Layer → Layer Mask → Disable (or choose it from layer’s contextual menu). Layer’s icon will change to 
and you’ll see the improved look:
Tested in Adobe Photoshop CS4. Hopefully this will increase your real productivity, have fun!
This is BumpTop for Mac transforming Finder’s desktop into a 3d space. Problems:
Conclusion: Very neat, but buggy. Uninstalled.
I’m a huge fan of 1Password. A single button in Safari lets me in to every site and all I have to remember is (you guessed) one password. Yesterday marks the day when version 3 was released. It uses a new and better keychain, has plenty of amazing features and support for 64bit Safari (yeah!). Well-done upgrade.
But my eyes hurt when I look at this:
I know not many people see this window very often, but I think whoever designed it went overboard. Let’s outline what is really wrong and why.
Sidebar is widely used in variety of apps since Leopard was released. As you can see it’s not exactly the same in every app but it’s conveniently similar. Finder and iTunes use slightly different background (other apps follow) and white text shadow for headers varies but they all look pretty coherent.
1Password on the other hand uses much darker background (with matching selection color) and oversized headers. Icons don’t match the same style and saturation and some of them are too big.
Main part of 1Password’s window is taken by a list with all passwords. What is wrong with that? Scrollbar. Take a look at scrollbars in Mac OS X:
On the left there’s default Aqua scrollbar, then Apple’s flat variation used for the first time in iTunes. I think we can all agree iTunes 9 looks like a glowing turd, but it actually manages to make that flat scrollbar prettier. And then there’s 1Password with its own invention. Let’s take a closer look.
Our password app wanted to have a flat scrollbar but it failed – bottom part is shorter, arrows lack shadow, there’s no depth and there’s no left border that would separate it from the table view. I’m not sure if you can choose iTunes-esque scrollbar in Interface Builder, but if you can’t you should build something better.
Next up: bottom toolbar.
They aren’t really the same, but every app using this interface element makes it in the same, unified gray. 1Password once again chooses the dark side and paints it with dark gray.
Lastly, there’s this thing:
Nobody tells guys at Agile Web Solutions to make editing data boring (Address Book), but I see so many custom elements and pointless decorations that my head hurts. And there’s more.
Text shadow everywhere, outer and inner. Misaligned labels. Custom (keyboard inaccessible) controls. Squeezed footer text despite plenty of space. Yellow band and tilted screenshot screaming “Look at me!” simultaneously. Paper clip, curled page, drop shadow, gradient and abstract drawing. I’m wondering where bevel is hiding. Christ.
I still love this piece of code for all the hard work it does. But Mac apps are details, fretted over and over. Interface should be recognizable but not juvenile. That’s why Cultured Code’s or Panic’s creations fit in the system yet are engaging. 1Password? Not so much.
If you’re like me, you watch a lot of videos online – The Daily Show, Colbert Report, Zero Punctuation to name but a few. If I had to focus only on what’s currently playing, I wouldn’t be doing anything constructive at all. So if a clip is longer than 2-3 minutes, I usually pull the tab out from Safari, resize and pan the viewport, place it somewhere on the screen and go back to whatever I was doing before.
Cumbersome.
Then the idea struck me. I could make a bookmarklet that would do all the hard work for me. And I did: Cut-out Page
Tested in Safari 4 and Firefox 3.5. Feel free to modify, steal, rewrite, whatever. I should put it on GitHub, but I’m still git-less afer upgrading to Snow Leopard. And lazy.
Known bugs:
Hey, what’s up? Long time no see.
I have something to confess: I got caught up in a rat race.
Constant improvement, lighter CSS, better typography, more accessibility, fluent writing.
For heaven’s sake, I maintained a site that had “perfection” in the URL.
How could I top that? The point is, I couldn’t.
That’s why you’re now reading a list of short, less-than-140-character sentences.
I need to start doing this again, and stop worrying about being perfect.
Brace yourself, because even I don’t know what happens next.
