SharePoint 2013: Focus on Content

SharePoint 2013 has introduced a small Focus on Content icon to the ribbon bar which, for the MasterPages that support it, will show and hide portions of the page when clicked. This can be useful for hiding non-essential page elements.

When the icon is clicked, JavaScript will do two things:

  1. It creates a cookie, so the selection is remembered the next time the page is visited.
  2. It adds a new ms-fullscreenmode class to the page’s BODY tag.

So, via CSS, we can decide which elements of the page should be hidden via the Focus on Content functionality.

.ms-fullscreenmode #nonessentialcontent { display: none; }

CSS and Nested Border-Radii

Now, this is an issue I’ve stumbled across while putting together CSS for websites.

You have two elements, one nested within the other, and both have rounded borders. Unless you get the radius of the nested element just right, you’ll end up with a nasty looking ‘hump’ where there should be a nice smooth curve (See Chris Coyier’s post for a visual example).

Fortunately, Joshua Hibbert has blogged about the problem, documented the math­em­at­ical for­mu­las and even coded a tool for the job. Great!