TextExpander: CSS Snippet Group

We just released TextExpander 2.2. We added a new snippet group of CSS definitions (created by me!) that you can use. To do so, click on the plus sign (+) below the snippet list and choose “Add Predefined Group”. “CSS Snippets” has been added to the list.

It’s always an fun intellectual exercise for me to develop a new snippet group for public use. Trying to anticipate how people will use the snippets is a challenge. I think it’s important for the abbreviations in a group to have a common leading character so that they are easier to remember. The HTML snippets all use the comma. The logic there is that Shift + comma produces a left angle bracket, the leading character in HTML tags. For CSS, I used the semi-colon. It’s easy to reach on the keyboard, and a semi-colon is used a separator for CSS property definitions. And, as is important with all TextExpander abbreviations, no actual words begin with a semi-colon.

Here’s a PDF with the CSS abbreviations and snippets. (You did know that you can print your snippets and abbreviations as a handy list, right? Command + P to print a group, Option + Command + P to print all groups.)

A few notes on these snippets:

  • All the abbreviations begin with a semi-colon
  • There are abbreviations for basic HTML selectors, like ;body, ;h1, ;ul, ;em, which expand into CSS for the corresponding tag, and reposition your cursor in the middle
  • There are the commonly-used properties, like ;color, ;lheight, ;fsize, and ;border
  • There are also some “packaged” snippets, like ;sans, ;serif, ;fs10, (font-size: 10px;), ;lh16 (line-height: 16px;)

Anyway, give it a whirl and let me know what you think! Any suggestions for additions would be very welcome.

6 Responses to “TextExpander: CSS Snippet Group”

  1. Francesco Scinico Says:

    I have a dumb question: I want to put an accent on some letters at the end of words (e.g. città or andrà). How do tell Textexpander to convert, say, a’ into à at the end of words? Right now, it’s only converting it if a’ is by itself, but not when it’s at the end of a word.
    thank you
    Francesco Scinico

  2. Jean Says:

    Francesco: That is not a dumb question. TextExpander only expands abbreviations when they are at the start of a word, so it can’t do what you are asking. If it were me, I’d add città to my snippets with the abbreviation “citta”, but judging from your name and your question, you are probably writing in Italian and need to use a lot of words ending in à, so that’s not too helpful. :-(

    I’ll pass your comment along to our developers so that they can consider it for a future update of TextExpander.

  3. Francesco Scinico Says:

    Jean,
    yes, i have a lot of words that end with accented vowels. I did create snippets for the most common ones, but we are talking about thousands of snippets here :(

    it’d be nice to implement this feature in the future.

    thank you very much for your prompt reply.
    Francesco

  4. Joe Says:

    What happened to the link to the pdf?

  5. Jean Says:

    @Joe: Sorry about that! That PDF was a victim of our complete website remodel. We neglected to move it into the new site. It’s fixed now. Thanks for the heads up.

  6. KA Says:

    Francesco,
    Pressing alt-` then a will get you an à in just one more stroke than you’re abbreviation would.

Leave a Reply