After a twitter conversation with @_TemperTemper I have decided to cover off some of the CSS support for Emmet as I understand I have not covered this already for a few reasons.

To begin with I never quite realised how simple Emmet would make my coding with CSS, mostly as I have became so used to using the tooltips I can type in 2 or 3 characters and still end up with the CSS I want for instance if I typed in “pad” and pressed enter I’d end up with Padding:; which is what I wanted, but I’ve became used to Emmet and it makes it so much easier now.

How it works

Similar to the HTML structure for Emmet you type in your shorthand declaration, press ‘tab’ and your css will be the end results.

For example, if you type in the following:

c#B00B13
db
m10
p10

You will end up with the following code:

color: #B00B13;
display: block;
margin: 10px;
padding: 10px;

In most cases the shorthand abbreviations for the CSS support are what you would expect them to be, p=padding, m=margin, db=display:block; fz10=font-size:10px; so on and so on.

Being more specific

Instead of just sticking to the absolute basic values of the code such as doing padding as an entire block element with 1 value you can mix it up a little and apply 4 different values of padding for the 4 different sides in 1 declaration or you could do the following:

pt10
pr10
pb10
pl10
p10-20-30-40

This will result in:

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding: 10px 20px 30px 40px;

I’m aware the above isn’t exact correct CSS, but only an example so please don’t turn up outside my house with pitchforks and torches at 3am.

Default values

In most cases when you insert a blank value you will be given px as a default outputted result, for instance p10 will result in padding: 10px; but you can also change this to anything you wish by putting in the required value.

For instance you can input p10em to receive p10em or even p10wtf to receive padding: 10em; and padding: 10wtf;

The only items I am aware of that do not have a default value already assigned to them are z-index, line-height, opacity and font-weight which will only insert the number you have set.

The dark side ( !important )

Not that I am encouraging this in any way, but it is possible to do so with Emmet and who knows, maybe some day you’ll need it but you can include the !important code by applying a ! to the end of any declaration you make, such as p10! will result in padding: 10px !important;

Most commonly used values

I did start putting together a list of some of the most commonly used CSS snippets in Emmet but in my research online I found this detailed list which if honest is much better and more in depth than anything I would have done.

http://peters-playground.com/Emmet-Css-Snippets-for-Sublime-Text-2/

Overview

Over the last few days I’ve been working on a app to be put onto the Samsung app store, the project is mostly for research purposes within the office as none of us had ever built a TV app.

After a bit of research I found that to build a Smart TV app the document sizes should be 540px in height by 960px in width, although with the height it is a minimum of 540px as you can scroll off the screen although maybe not best to.

CSS

Today I began experimenting and made a list of all the commonly used CSS3 elements which appear in our builds so I know for future reference what I can and can not use, similar to what I did with email templates.

Below I have listed what I have found that is or is not supported

Findings

Of the findings there weren’t really any major surprises, although, I was pleasantly surprised at how simple it was to build the actual template with the exception of the :hover, :focus and :active state of elements.

If you want to apply any of these states to elements you have to use javascript to be able to move around the screen, without javascript there is no navigational functionality and this is needed to apply a class to replace your psuedo class states.

Filters are not supported but if honest I did not expect this, so far it is relatively new and rarely used so it is not a great loss, I was more just curious if it worked which was why I was including it.

Background-size is also not supported but again I do not see this being an issue, especially as in most cases you will be working with a fixed width area so you are already aware of the size of the content area for the image.

Thoughts

Another few issues I have with the TV support so far is that there are so few resources available at the current moment in time, admittedly this is due to it being  a massively new technology but it is also as though the manufacturers are ganging up on us.

For instance apps that you build for a Samsung TV will not work on a Panasonic TV or a Sony TV, it is almost a carbon copy of the early internet years were every browser decided what they were doing was correct and in the end we had a world of pain to work in, fortunately the web has evolved since then and we have learnt from the mistakes of the past, but this is a new step and so far it is stepping off on the wrong foot.