Word completions in CSS

There is a clever word completion mechanism in CSS mode which saves you keystrokes and time while typing. It also helps you to make sure no properties are misspelt.

As explained on the previous page you can use dialog windows to edit CSS properties, but perhaps you prefer simply to type them. Then the word completion mechanism can help you. Word completion is bound to ctrl-tab.

Tip: If you prefer another key binding to ctrl-tab for word completion you can change it using Config->Special Keys...

How word completion works is best explained with examples.

When you are outside a pair of braces Alpha tries to expand what you have typed to an HTML element. For example, if you type


and hit ctrl-tab it is expanded to


Continue by inserting a { and begin typing a CSS property


Hitting ctrl-tab expands this to


Continue by typing a few letters of the value of vertical-align.

    vertical-align: bas

Hit ctrl-tab and this is expanded to

    vertical-align: baseline

Many properties can either take a value from a list of possible values or some other type of value. When completing CSS mode tries to match against the values in the list. For example 'marker-offset' can either take the values 'auto' or 'inherit' or a length. When completing the value for marker-offset, CSS modes matches against 'auto' and 'inherit'.

When you're typing a URL it can also be expanded using the URL cache, and when you type a color it is matched against the color names.

Previous page Next page