CHUVASH.eu

CHunky Universe of Vigourous Astonishing SHarepoint :)

Tag Archives: css3

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:

.warning {
  background-color: red;
}

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

html .warning
div .warning
div.warning, div > .warning
body p#myP.blue strong.warning

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:

.contoso-html #s4-workspace { }

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”.

Pragmatic Responsive Design

I have been curious about the responsive design but have not had time to try it out. To learn more I decided to make an existing website more responsive. A friend of mine drives a Chuvash Dictionary website: samah.chv.su. Today it looks like this in a mobile browser:

Before responsiveThe site is a classic 1000px-ish centered page with header and two columns. The left column is for the main content and the right column for additional “aside” information. Can it be more classic? This current version works, you can still use the dictionary on a mobile phone. But there are several improvements that can be done:

  • Avoid scaling to be able to read text
  • Avoid scrolling back and forth to read every line
  • Move the right column down, it is better to use the space for the main content.
  • Hide the quick links to the individual letters
  • Shrink unused space in the header.



What I wanted was to provide some easy steps to make it more responsive. The steps had to be pragmatic: some easy-to-implement steps that would make a difference, and with very little impact on existing markup.

I created a copy of this page and made it available publicly, because I wanted to access from everywhere and test it on so many devices and resolutions as possible. I used Github Pages to get the version control too, even though a public folder on Dropbox, OneDrive or Google Drive could give the same result.

Here is my list of what I did to make it more responsive:

Don’t do anything for larger resolutions

Just leave it as it is, unless you want to redesign your site.

Create the css file for responsive design

Just create a file and call it responsive.css. Reference this file inside your site in a usual way.

<link rel="stylesheet" href="./responsive.css" type="text/css">

Set witdh 100% when a scroll appears

Find the “break point” where your site gets a horizontal scroll. To do so, just fire the Chrome Dev Tools, dock it to the right, and resize your page. In my case it was 1016px. Now it is time to do a change. Create a media query for that and try to remove all the hard-coded width values by setting width:100%. Well something towards this “very responsive site”.

@media all and (max-width: 1016px) {
    .art-sheet {
        width: 100%;
    }
    div.art-header {
        width: 100%;
    }
}

Let the columns disappear

Find the width where two columns become ugly and impractical. Create a media query for that and just style the columns so they do not float. In my case the original site uses table-row layout. I set display:block and the right column went down.

@media all and (max-width: 675px) {
  div.art-content-layout-row {
      display: block;
  }
  div.art-content-layout div.art-layout-cell {
      display: block;
  }
  div.art-content-layout-row {
      display: block;
  }
}

Prevent scaling in mobiles

Now your page is more responsive in a desktop browser, but it is still unreadable in a mobile. The reason is the mobile browser that scales it for us. Let’s disable it. Just put this meta tag in the head session of your page:

<meta name="viewport" content="width=device-width, initial-scale=1">

Hide rarely used elements

In a mobile we want to see the most important things, the actual content. Hide menus and remove empty spaces. In my case I hid the letters that took to much place and the language switcher. They can be shown in another menu (see below).

Make a responsive navigation menu

It is not complicated at all. You can google it. There are many tips and jQuery plugins. I did in a very easy way. I added a new div to my html:

<div id="responsive-menu" onclick="toggleMenu()">☰</div>

I also added this css style and hid this div for bigger resolutions:

#responsive-menu {
  position: absolute;
  right: 5px;
  top: 15px;
  font-size: 30px;
  cursor: pointer;
  display: none;
}
@media all and (max-width: 399px) {
  #responsive-menu {
    display: block;
  }
}

Here is the tiny javascript click event listener:

(function() {
  var menuOpen = false
      , menu
      , langSwitcher;

  window.toggleMenu = function() {
    menu = menu || document.getElementsByTagName("center")[0];
    menu.style.display = menuOpen ? "none" : "block";
    menuOpen = !menuOpen;
  }
})();

Here is the result. There are still some improvements that can be done, but here is the result of the my changes.

samah-004 samah-003

Add a website icon

Improve the user experience by adding a website icon. It will be used when an iPhone, iPad and Android user will save your page as a bookmark (and it will be placed on the screen and look like any app). Here is how I did:

  1. I created a 74 x 74 px png image and saved it as apple-touch-icon.png. I placed it in the “root folder”.
  2. In the page markup I added this line inside the head element:
<link rel="apple-touch-icon" href="apple-touch-icon.png">

That’s it. So now when someone saves the website as a bookmark, it looks like this:

photo samahsar-001 Screenshot_2014-03-25-23-30-02

Then on the mobile screen it looks like any other app. It works even on Android devices (even though the icon is an apple-touch-icon).

 

UPDATE 2014-03-25

Now these changes are implemented on the real site: samah.chv.su

UPDATE 2014-05-12

I discovered a blog post about how to adjust a web app for best experience in iOS. This gist is a perfect example what you can add for properties.

<!-- Run in full-screen mode. -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Make the status bar black with white text. -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- Prevent text size adjustment on orientation change. -->
<style>html { -webkit-text-size-adjust: 100%; }</style>

Cool presentation about web performance optimization

Enable Save in IE9 mode

Wouldn’t it be nice to use html5 and css3 in SharePoint? No problems, there is actually v5 master out there, created by Kyle Schaefer. Or just use h5ml5 and css3 right away in your webparts and pages. But there is a big problem. It doesn’t work in IE9–. One of the issues (even listed by Kyle) is that “save” doesn’t work in modal dialogs where Rich Text Editor is used. Especialy it is for modal dialogs.

The problem is not IE9, neither html5 and css3. After some digging in javascript code which is shipped with SharePoint I found out that the problem is some legacy javascript code which is not supported by IE9 but in IE8– (and compatibility mode).

When we set IE9 mode in IE9 Dev Tools (F12) and go to Tasks list and try to create a task, we’ll get an error:

It is RTE_GetEditorIFrame from init.js:

function RTE_GetEditorIFrame(strBaseElementID)
{ULSopi:;
	var ifmEditor=null;
	var doc=document;
	if ((null !=doc.frames) && (doc.frames.length==0) && (doc.parentWindow.parent !=null))
	{
		doc=doc.parentWindow.parent.document;
	}
	if ((null !=doc.frames) && (doc.frames.length > 0))
	{
		var ifmContainer=doc.getElementById(RTE_GetEditorIFrameID(strBaseElementID));
		if (ifmContainer !=null)
		{
			ifmEditor=doc.frames(RTE_GetEditorIFrameID(strBaseElementID));
		}
	}
	return ifmEditor;
}

So it is document.frames(“…”), not the usual document.frames[“…”]. What is that VB-style about?

Okay, the reason why this error isn’t raised in other browsers is just because this weird code isn’t run (Try to set break point there in Chrome or Firefox). And that’s why you never see Rich Text Editor toolbar in EditForm.aspx in Chrome and Firefox. To prove this, try to remove the Rich Text Column in your list. Then you can use “Save” button again, with IE9 mode!

Now we know the reason. How can we solve it. To do so we must find out where javascript defines whether to run or not Rich Text Editor toolbar.

First RTE_GetEditorIframe is invoked by RTE_ConvertTextAreaToRichEdit which is invoked by an inline script directly from NewForm.aspx:

if (browseris.ie5up 
  && (browseris.win32 || browseris.win64bit) 
    && !IsAccessibilityFeatureEnabled()){
    RTE_ConvertTextAreaToRichEdit("ctl00_m_g_0a9abd43_19a2_461e_b46f_6a1ae22a7ff1_ctl00_ctl05_ctl06_ctl00_ctl00_ctl04_ctl00_ctl00_TextField"
      , true, false, "", "1044", null, true, null, null, null
        ,"Compatible", "\u002ft001",null,null,null,null);
    }
else{
  document.write(" <br /><span class=\"ms-formdescription\"><a href='javascript:HelpWindowKey(\"nsrichtext\")'>Klikk her for hjelp med å legge til grunnleggende HTML-formatering.</a></span> <br />");
};

So there it is where the fishy code is invoked. Okay how can we intervene here to enable Save button? All solutions are based on disabling the bad code which is used to “convert” textarea to RichEdit.

1. Solution number one override RTE_ConvertTextAreaToRichEdit, just in style:

function RTE_ConvertTextAreaToRichEdit() {};

2. Solution number two: override IsAccessibilityFeatureEnabled, or this one:

function SetIsAccessibilityFeatureEnabled(f)
{ULSA13:;
	if (f)
		document.cookie="WSS_AccessibilityFeature=true;path=/;";
	else
		document.cookie="WSS_AccessibilityFeature=false;path=/;";
	var hiddenAnchor=document.getElementById("HiddenAnchor");
	var event;
	if (browseris.ie)
		event={ "srcElement" : hiddenAnchor , "fakeEvent" : 1, "enableStatus" : f};
	else
		event={ "target" : hiddenAnchor , "fakeEvent" : 1, "enableStatus" : f};
	if (hiddenAnchor==null || hiddenAnchor.onclick==null)
		return;
	hiddenAnchor.onclick(event);	
}

So to fool Accessibility, just set your own cookie: document.cookie=”WSS_AccessibilityFeature=true;path=/;”. But: don’t do that. It is really bad idea. Many features will stop working.

3. Solution number three is to override browseris. browseris is a browser which holds the information about the browser, simple. Here is how it is defined in init.js:

function Browseris () {ULSA13:;
	var agt=navigator.userAgent.toLowerCase();
	this.osver=1.0;
	if (agt)
	{
		var stOSVer=agt.substring(agt.indexOf("windows ")+11);
		this.osver=parseFloat(stOSVer);
	}
	this.major=parseInt(navigator.appVersion);
	this.nav=((agt.indexOf('mozilla')!=-1)&&((agt.indexOf('spoofer')==-1) && (agt.indexOf('compatible')==-1)));
	this.nav6=this.nav && (this.major==5);
	this.nav6up=this.nav && (this.major >=5);
	this.nav7up=false;
	if (this.nav6up)
	{
		var navIdx=agt.indexOf("netscape/");
		if (navIdx >=0 )
			this.nav7up=parseInt(agt.substring(navIdx+9)) >=7;
	}
	this.ie=(agt.indexOf("msie")!=-1);
	this.aol=this.ie && agt.indexOf(" aol ")!=-1;
	if (this.ie)
		{
		var stIEVer=agt.substring(agt.indexOf("msie ")+5);
		this.iever=parseInt(stIEVer);
		this.verIEFull=parseFloat(stIEVer);
		}
	else
		this.iever=0;
	this.ie4up=this.ie && (this.major >=4);
	this.ie5up=this.ie && (this.iever >=5);
	this.ie55up=this.ie && (this.verIEFull >=5.5);
	this.ie6up=this.ie && (this.iever >=6);
	this.ie7down=this.ie && (this.iever =7);
	this.ie8standard=this.ie && document.documentMode && (document.documentMode==8);
	this.winnt=((agt.indexOf("winnt")!=-1)||(agt.indexOf("windows nt")!=-1));
	this.win32=((this.major >=4) && (navigator.platform=="Win32")) ||
		(agt.indexOf("win32")!=-1) || (agt.indexOf("32bit")!=-1);
	this.win64bit=(agt.indexOf("win64")!=-1);
		this.win=this.winnt || this.win32 || this.win64bit;
	this.mac=(agt.indexOf("mac")!=-1);
	this.w3c=this.nav6up;
	this.safari=(agt.indexOf("webkit")!=-1);
	this.safari125up=false;
	this.safari3up=false;
	if (this.safari && this.major >=5)
	{
		var navIdx=agt.indexOf("webkit/");
		if (navIdx >=0)
			this.safari125up=parseInt(agt.substring(navIdx+7)) >=125;
		var verIdx=agt.indexOf("version/");
		if (verIdx >=0)
	            this.safari3up=parseInt(agt.substring(verIdx+8)) >=3;
	}
	this.firefox=this.nav && (agt.indexOf("firefox") !=-1);
	this.firefox3up=false;
	this.firefox36up=false;
	if (this.firefox && this.major >=5)
	{
	    var ffVerIdx=agt.indexOf("firefox/");
	    if (ffVerIdx >=0)
	    {
		var firefoxVStr=agt.substring(ffVerIdx+8);
	        this.firefox3up=parseInt(firefoxVStr) >=3;
		this.firefox36up=parseFloat(firefoxVStr) >=3.6;
	    }
	}
}
var browseris=new Browseris();
var bis=browseris;

So to fool this, just set:

 var browseris = {};

But you have to do it after init.js, so wrap into ExecuteOrDelayUntilScriptLoaded:

ExecuteOrDelayUntilScriptLoaded(function() { 
  var browseris = {}; 
}, "init.js");

After that you can press Save button. You’ll lose the Rich Text Editor, but you’ll have the nice features from CSS3.

DISCLAIMER: It is just an exploration lab. There is no warranty that it will work across the whole site. Don’t ever do such things things at home!

css3 fixers

If you just want to use css3 in your design and still use team functionality, take a look on pie.htc, jQuery.corner or iecss3.

 

Update 2015-09-16 Other Related Issues

Recently me and my colleague had to fix this issue again in SharePoint 2010. What we found was failing select elements (Choice field or Lookup field) in forms. There are some js functions that do not run in other web browsers rather than in IE in IE9 mode. All fail because of the inability of getting custom html element attributes.


//This is an override of FilterChoice (in core.js)
//We override this line: var strOpts=ctrl.choices; -> var strOpts=ctrl.getAttribute("choices");
//The reason is that this does not work in IE9 mode
//Don't forget this workaround. It might lead to other problems
function FilterChoice_new(opt, ctrl, strVal, filterVal) {
   var i;
   var cOpt=0;
   var bSelected=false;
   var strHtml="";
   var strId=opt.id;
   var strName=opt.name;
   var strMatch="";
   var strMatchVal="";
   var strOpts=ctrl.getAttribute("choices"); //THIS ONE
   var rgopt=strOpts.split("|");
   var x=AbsLeft(ctrl);
   var y=AbsTop(ctrl)+ctrl.offsetHeight;
   var elmWorkspace=document.getElementById("s4-workspace");
   if(elmWorkspace)
                                y -=AbsTop(elmWorkspace);
   var strHidden=ctrl.optHid;
   var iMac=rgopt.length - 1;
   var iMatch=-1;
   var unlimitedLength=false;
   var strSelectedLower="";
   if (opt !=null && opt.selectedIndex >=0)
   {
      bSelected=true;
      strSelectedLower=opt.options[opt.selectedIndex].innerText;
   }
   for (i=0; i < rgopt.length; i=i+2)
   {
      var strOpt=rgopt[i];
      while (i < iMac - 1 && rgopt[i+1].length==0)
      {
         strOpt=strOpt+"|";
         i++;
         if (i < iMac - 1)
         {
                                      strOpt=strOpt+rgopt[i+1];
         }
         i++;
      }
      var strValue=rgopt[i+1];
      var strLowerOpt=strOpt.toLocaleLowerCase();
      var strLowerVal=strVal.toLocaleLowerCase();
      if (filterVal.length !=0)
                                   bSelected=true;
      if (strLowerOpt.indexOf(strLowerVal)==0)
      {
         var strLowerFilterVal=filterVal.toLocaleLowerCase();
         if ((strLowerFilterVal.length !=0) && (strLowerOpt.indexOf(strLowerFilterVal)==0) && (strMatch.length==0))
                                      bSelected=false;
         if (strLowerOpt.length > 20)
         {
                                      unlimitedLength=true;
         }
         if (!bSelected || strLowerOpt==strSelectedLower)
         {
            strHtml+="<option selected value=\""+strValue+"\">"+STSHtmlEncode(strOpt)+"</option>";
            bSelected=true;
            strMatch=strOpt;
            strMatchVal=strValue;
            iMatch=i;
         }
         else
         {
            strHtml+="<option value=\""+strValue+"\">"+STSHtmlEncode(strOpt)+"</option>";
         }
         cOpt++;
      }
   }
   var strHandler=" ondblclick=\"HandleOptDblClick()\" onkeydown=\"HandleOptKeyDown()\"";
   var strOptHtml="";
   if (unlimitedLength)
   {
      strOptHtml="<select tabIndex=\"-1\" ctrl=\""+ctrl.id+"\" name=\""+strName+"\" id=\""+strId+"\""+strHandler;
   }
   else
   {
      strOptHtml="<select class=\"ms-lookuptypeindropdown\" tabIndex=\"-1\" ctrl=\""+ctrl.id+"\" name=\""+strName+"\" id=\""+strId+"\""+strHandler;
   }
   if (cOpt==0)
   {
      strOptHtml+=" style=\"display:none;position:absolute;z-index:2;left:" + x 
        + "px;top:" + y + "px\" onfocusout=\"OptLoseFocus(this)\"></select>";
   }
   else
   {
      strOptHtml+=" style=\"position:absolute;z-index:2;left:"+x+"px;top:"+y+" size=\""
        +(cOpt <=8 ? cOpt : 8)+"\""+ (cOpt==1 ? "multiple=\"true\"" : "")
        + " onfocusout=\"OptLoseFocus(this)\">"+  strHtml + "</select>";
   }
   opt.outerHTML=strOptHtml;
   var hid=document.getElementById(strHidden);
   if (iMatch !=0 || rgopt[1] !="0" )
      hid.value=strMatchVal;
   else
      hid.value="0";
   if (iMatch !=0 || rgopt[1] !="0" )
      return strMatch;
   else return "";
}
function SetCtrlMatch_new(ctrl, opt) {
  //ctrl.getAttribute("optHid") instead of ctrl.optHid
  var hid=document.getElementById(ctrl.getAttribute("optHid"));
  hid.value=opt.options[opt.selectedIndex].value;
  if (hid.value !=0)
    ctrl.match=opt.options[opt.selectedIndex].innerText;
  else
    ctrl.match="";
}

function HandleOptDblClick_new() {
  var opt=event.srcElement;
  //opt.getAttribute("ctrl") instead of opt.ctrl
  var ctrl=document.getElementById(opt.getAttribute("ctrl"));
  _SetCtrlFromOpt(ctrl, opt);
  SetCtrlMatch(ctrl, opt);
  opt.style.display="none";
}

function _SetCtrlFromOpt_new(ctrl, opt) {
  var hidId = ctrl.getAttribute("optHid");
  if (!hidId) { return; }
  //ctrl.getAttribute("optHid") instead of ctrl.optHid
  var hid=document.getElementById(ctrl.getAttribute("optHid"));
  hid.value=opt.options[opt.selectedIndex].value;
  if (opt.options[opt.selectedIndex].value==0)
  {
    ctrl.value=opt.options[opt.selectedIndex].innerText;
    ctrl.match="";
  }
  else
  {
    ctrl.value=opt.options[opt.selectedIndex].innerText;
    ctrl.match=ctrl.value;
  }
}

function HandleOptKeyDown_new() {
  var opt=event.srcElement;
  //opt.getAttribute("ctrl") instead of opt.ctrl
  var ctrl=document.getElementById(opt.getAttribute("ctrl"));
  var key=event.keyCode;
  switch (key)
  {
  case 13:
  case 9:
    _SetCtrlFromOpt(ctrl, opt)
    event.returnValue=false;
    opt.style.display="none";
    return;
  default:
    break;
  }
  return;
}

ExecuteOrDelayUntilScriptLoaded(function() {
  FilterChoice = FilterChoice_new;
  SetCtrlMatch = SetCtrlMatch_new;
  HandleOptDblClick = HandleOptDblClick_new;
  _SetCtrlFromOpt = _SetCtrlFromOpt_new;
  HandleOptKeyDown = HandleOptKeyDown_new;
}, "core.js");


 

Two interesting html5-in-sharepoint presentations

css3 transform

See Richards Bradshaw’s page with explanations and examples of css3 transform and transitions. His code is also available for forking on Github.

master page for html5 and css3

A great work: v5.master. I am recommending to try it.

The problem are some javascript bugs in the IE 9 when you run IE mode 9 that are necessary to enable html5 and css3 support. You can’t “save” a list item:

The reason why it doesn’t work in IE, but in Chrome, Firefox, is that IE invokes some functionality that it doesn’t invoke in other browsers.

Next: Enable Save button in IE9

Discovering SharePoint

And having fun doing it

Bram de Jager talking Office 365, SharePoint and Azure

My view and thoughts on Productivity and more.

My programming life

and everything in between

SharePoint Development Lab by @avishnyakov

It is a good place to share some SharePoint stories and development practices.

SharePoint Dragons

Nikander & Margriet on SharePoint

RealActivity - Real-time and trustworthy

Blog site of founder, RealActivty - Paul J. Swider

Mai Omar Desouki - Avid SharePointer

Egyptian & Vodafoner - Senior SharePoint Consultant

Cameron Dwyer | Office 365, SharePoint, Outlook, OnePlace Solutions

Office 365, SharePoint, OnePlace Solutions & Life's Other Little Wonders

.:paul.tavares:.

Me and My doings!

Share SharePoint Points!!

By Mohit Vashishtha

Jimmy Janlén "Den Scrummande Konsulten"

Erfarenheter, synpunkter och raljerande om Scrum från Jimmy Janlén

SPJoel

SharePoint for everyone

SharePointRyan

Ryan Dennis is a SharePoint Solution Architect with a passion for SharePoint and PowerShell

SharePoint 2020

The Vision for a Future of Clarity

Aharoni in Unicode, ya mama

Treacle tarts for great justice

... And All That JS

JavaScript, Web Apps and SharePoint

blksthl

Mostly what I know about SharePoint - CommunicoCuspis