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.
