Text emboss in CSS

I know only two _unperfect _ways of displaying an emboss text in CSS. As we can't use inset shadows with text-shadow, unlike box-shadow, we have to resort to other hacky ways.

Let me show you what can be done.

Simulate it with an optical illusion

Instead of creating a real inner shadow, you can just create an optical illusion by adding the correct shadow to make the viewer believe your text is embossed.

If you have dark text, just add a subtle white shadow at the bottom, while if you have light text, just add a subtle black one at the top.

<a class="emboss light">Lorem ipsum</a>
<a class="emboss dark">Lorem ipsum</a>

.emboss { font-size:1.2em; padding:50px; font-weight:bold; background:#0A539C; display:block; }
.light { color:#FFFFFF; text-shadow:0px -1px 0px rgba(0,0,0,0.9); }
.dark { color:#000000; text-shadow:0px 1px 0px rgba(255,255,255,0.1); }

I added an embossclass to more easily spot the effect, but the important code is in the lightand darkrules.

Add an almost transparent layer

For this second solution we will simply add a second layer with the exact same text above the first text. Just slightly moving it and making it partly transparent.

You could add twice your element in your markup, but that would be bad for accesibility as well as SEO, so we'll instead use the :before pseudo-class.

We can set the :before content using the content: property, and we can also use theattr() method to get the content of one of our element's attributes. We just need to put the exact same text in one of our attributes and we're good to go.

This can be easily done with a link and its titleattribute.

<a class="emboss lightAgain" title="Lorem ipsum">Lorem ipsum</a>
<a class="emboss darkAgain" title="Lorem ipsum">Lorem ipsum</a>

.lightAgain { color:#FFFFFF; position:relative; }
.lightAgain:before {
  content: attr(title);
  position:absolute;
  color:rgba(0,0,0,0.1);
  top:-1px;
  left:-1px;
  padding:50px;
}
.darkAgain { color:#000000; position:relative; }
.darkAgain:before {
   content: attr(title);
   position:absolute;
   color:rgba(255,255,255,0.1);
   top:1px;
   left:1px;
   padding:50px;
}

The effect is much better with this technique but it also has it share of drawback :

• You have to write your content twice, once in the element and once in an attribute
• You have to copy all your paddingrules in the :beforeelement or it won't get correctly positionned
• You can't select the text with this effect

Hope those two little techniques helped someone, anyway.

How to hide/show elements based on Javascript

Sometimes you have a really great design with some really fancy Javascript goodness, like drag'n'drop and other shiny Ajaxy stuff.

But when you browse the website with Javascript disabled, none of that works and you end up with interface elements that should'nt be here because they do not work.

In those case, you'd rather display a nice message to your user, telling him that he can't use the feature withou Javascript enabled.

But how do you do that ?

Well, I myself load two different stylesheets. Remember that your website should be working without Javascript, this is just the last layer you add.

My default stylesheet will load all the rules for when Javascript is not enabled. No fancy cursor:move here.

Then I load a second stylesheet using Javascript, using document.write() in the <head>. And that's in this one that I write rules that overload the previous one. I add every styling that deals with Javascript-enabled features here.

Limitations

I may be changing the way I load the JS stylesheet in the future. I don't really like relying on document.write because it is evil. I also don't like the idea of getting one extra request.

I could add a js class to my body element (like modernizr does with all its CSS3 properties) and then target elements by prepending .js to the rule.

But it means adding rules in my main CSS file for users without JS that will still be downloading those extra useless bytes.

I haven't yet figured which way was the best (or should I say, the worst)

Convenient methodes

Whatever way you choose, one thing that really helped me was two real simple classes : jsOnand jsOffthat I add to elements.

Elements with jsOnwill only be visible if Javascript is enabled and hidden otherwise, while element with jsOffwill do the opposite.

Assuming you mark your body element with a js class if Javascript is enabled, here's how to do it :

.jsOn { display:none; }
.js .jsOn { display:block;
.jsOff { display:block;
.js .jsOff { display:none;

Hope all that helps at least someone.

Corrupted strings when using strtolower()

Little blog post at 5am, I'll try to make it very short, I need some sleep.

To avoid getting corrupted string results when calling strtoloweron UTF8 strings, you can call mb_strtolower instead. The mb_* functions are aware of the utf8 encoding.

Unfortunatly, sometime you just can't, because the call is made in the cakePHP core (Inflector). Defining a CTYPElocale for your whole app may be a better solution.

Just add a setlocale(LC_CTYPE, 'C'); in your app and all your utf8 strings will correctly work with string functions.

Just note that on Windows, calling setlocale will change the locale for all threads, not just the one where PHP is running. This may cause unexpected results.

How to fix the Firefox autocomplete 'feature'

Firefox can be quite a pain sometimes. I usually praise this browser features but today I had to deal with one tricky 'intelligent' feature.

You know that autocomplete/autofill feature, so that when you enter your user name, Firefox automatically fill the corresponding password field so you won't have to do it ?

Well, it is bad, and here's why.

How does it work ?

I haven't read the source code, but from what I've experienced it seems to work like that :

For each password field, FF will find the related username text field. This is just a very basic search, it assume that the closest previous text field is the related one. Now, everytime you enter a value in the text field that match one of the username saved, it will autofill the password field.

Note that if you have more than 5 password fields on a page, the feature will be disabled.

What is terribly wrong with this approach

Let's imagine you are a registered user of a website. You want to update your preferences. You have a nice page with lots of input fields where you can change your email, password and date of birth.

For security reasons, your password is not displayed. For convenient reasons, the website also don't ask you to type your password everytime your want to update your settings. It assumes that if you let the password field blank, it means that you don't want to change it. And if you really want to change it, then it asks for a confirmation, to make sure your correctly typed it.

So, with this autocomplete feature, if your email is also your login for the website (as it is often the case), Firefox will autofill the password field with your password. Meaning that if you submit your form, you'll be met with an error because your password and it's confirmation does not match.

You'll then have to manually clear the content of the password field everytime your want to edit your profile. Which is counter-intuitive. The whole convenient method of not changing the password if left empty is rendered useless.

The worst part is that most users won't understand when the error comes and will blame the webdeveloper.

Solutions that does not work

First, Firefox is just doing a very wild guess on that fields. And, there is no way to disable this feature from the page markup. Sure, as a user you can disable it in your browser setting, but as a web developper, you can't disable it.

There is a non-standard autocomplete="off" argument, but it does not work in our case. It is supposed to prevent the browser to store previously entered values on sensible fields (like credit card numbers).

I've tried putting this autocompleteattribute on every input field, even on the form itself. Setting the valueattribute does not work either. Even updating the value through Javascript would not work because the password field will get re-populated on every blur event on the text field.

A solution that does work

The final solution I've found is to add a dummy password field between your real mail and password fields. That way, Firefox will autocomplete this dummy password instead of the real one.

Unfortunatly this adds clutter to your markup, but with a little display:none in CSS it won't ever be seen by your users.

7 advices to start using OOCSS as a coding practice

Not long ago, I stumbled across this video about massive and unmaintainable CSS files from Nicole Sullivan. It made me want to try OOCSS.

OOCSSis a way to code css in a way that replicates the goodies general OOP told us. Classic CSS use the cascade in selectors to emulate a concept of inheritence.

OOCSS puts the concept of inheritence a little step further by telling us to create "modules" in our CSS files. Each module represent a "widget" of our page, or should I say of our whole site.

It comes with a simple list of principles that could allow one to write much more flexible and maintainable code. I rewrote the whole CSS for this website (as well as the admin interface I'm using behind the doors) following those principles, and I thought I'll share it with you.

Drop the #id selector

We won't be using the #id selector anymore (except for some edge cases). Instead of #commentList {} we'll use .commentList {}

This change alone lets us reuse the same element multiple times on the same page.

Note that we will still add ids in our HTML markup for form inputs or for Javascript purpose (document.getElementById is still the faster selection method).

Don't make your selector dependent on the page structure

We won't style our elements based on where they will be displayed in the page.

We don't care if our module will be displayed in a footer, sidebar, specific page or whatever. We just style it all the same.

Instead of writing .sidebar .lastComments {}, we will go for the shorter .lastComments {}.

This will allow us to easily display the last comments on any page, anywhere. You should carefully name your modules to something that clearly evoke what the module is supposed to display, without ambiguity.

If you need to tweak the display of an element in a certain part of the page, you could always write a specific selector for this specific need, that will overwrite the default rules. But this must not be your default selector.

Do not use both tag and class selector on the same element

Avoid the div.errorMessage, ul.userList selectors. The first one is just too specific : what happen if you ever want to style a <p> instead of a <div> ? The second one is useless, <ul> is a list by definition.

There is only one moment when being that specific can be useful, it is when you need to overwrite, for a specific element, rules defined for the class. Fortunatly, thanks to the OOCSS coding style, this won't happen much.

Don't make your selectors over-specific

This is a followup of the previous rule, but don't write overly specific rules, like .userList table thead tr th a. A simple .userList thead a is enough.

First, you are overly detailing each level of the markup while most of the time the uppermost and lowermost parts are enough. But you also define useless selectors like tr th or ul li, where th or li are enough (those elements can not be placed in any other parent element).

Create your own reset stylesheet

To avoid repeating margin:0; padding:0 over and over in your stylesheets, you should spend some time finding a reset stylesheet that you like and then tweaking it to fit your coding practice.

I used to include the Tripoli framework in my previous projects but I found that I had to reset styles it was settings far too often.

All reset stylesheets are not equals, some will just remove all styling from elements, letting you define them as you want. Others will also assign default rendering styles to make something both visually beautiful and cross-browser.

But the best reset stylesheet you'll get is the one you'll create (or, as it is quite a bit of work, tweak) yourself.

Use a grid system to place elements

Some years ago, I found CSS Framework like Blueprint to be a waste of time. I didn't want to clutter mu HTML markup with non-semantic classes for handling the styling.

I also found that the psd files I was given to integrate couldn't fit in grids because the sidebar was 173px wide for example.

Now I still don't think cluttering the HTML with span-6 pull-2 is the best thing that happened to CSS, but I found it much better than cluttering my CSS with endless overflow:hidden and float:left; margin-right:10px declarations.

And I still got design from not-so-professional designers to integrate that do not seems to have any logical proportion, and can't fit them in grids. But I also work with more talented people that deliver beautiful design and they tend to be the one that fits easily into grids.

So it may not always be possible to use a grid system, but more often than not, it is and even if that means tweaking the original (badly designed) design a dozen pixels off, it will greatly help the CSS process.

Create a global stylesheet for your main classes

I also create a main stylesheet for all the classes I know I'll be reusing all accross this project (and others). I include it at the top, right after the reset one.

In it I'll defined general classes that could be extended by all the other inner classes later. Like a .message class, that I may be extending later using .message.error or .message.success

One final word

Ok, this is it. I'm fairly new to OOCSS too, so I'm still discovering it too. So far I found that I have greatly reduce the size of my files but most importantly, my styles are way more easy to tweak for special needs than before.

It also helped me separate the various elements of the website, and it is much more easier to find the piece I need. Fewer classes to depends on means I know where the rules are coming from and I can write more specific selectors if need me more easily.