Kategoriarkiv: HTML

Tip: Use the weakest CSS selectors

I am reading Mobile HTML5 written by Estelle Weyle. It is an awesome recap and new knowledge about html, css and javascript. I want to highlight one of tips I got: Use the weakest CSS selectors (can be found on page 204).

We all know, that inline CSS and !important are evil. They have a higher level of specifity and override the standard cascade of the CSS rules. If you use !important, then it will be hard to override CSS rules when you really need it. After these two classic “evils” the evil number three is overqualifying of CSS selectors. You should really never add more classes or ids or elements than needed. Consider this:

It is often enough, you don’t need those:

SharePoint

In SharePoint sometimes we want override some OOB CSS rules. We have our own “namespace” to do that really simple. We have added a class to the html tag: “contoso-html”. Then it was really easy to update any OOB CSS rules, just copy the selector and add .contoso-html:

We also use less preprocessor and nest our selectors which has resulted that almost all of our selectors contain .contoso-html. Now back to the tip of that blog. This “namespace” made it harder to adjust CSS rules for special cases, like left navigation in the Search Center, we were forced to add more specific selectors, and selectors became bigger and bigger.

What I would recommend today is to skip the .contoso-html namespace in the CSS but keep it in the masterpage markup, use it wisely, meaning only if the original rule doesn’t work. Don’t nest too much in less files. Try always to find the weakest CSS selector. It is especially important in the SharePoint “markup djungle”.

How to provision a ContentEditorWebPart (CEWP) with predefined content to a page using a module

I did this a long time ago, then when I recently had to do it again, I couldn’t fid any Resources online describing how to do it. Simply adding text to the <Content> tags of the <AllUsersWebPart> declaration didn’t do it. The reason is simple I Think. The content in a CEWP is html, and you need encoded HTML tags for it to show. Otherwise the content will simply be ignored (This is my own theory at least. I haven’t investigated much).

So knowing that you can add any html content. Here is how you add an image for example:

The easiest way to get encoded HTML is to use an Encoder, like this one. Simply paste your html and press encode. Then paste the results inside the <Content> tag for the CEWP. My full code example can be found below. This is to be put inside the File element in a Module:

This works in SP2010 and 2013. Just change the assembly version to 14 or 15 depending on which you are using. I presume it works the same in 2007 also, but I haven’t tried.