Working with client side relative URL tokens in SharePoint 2010/2013

Most of the time we are having problems with:

• Getting relative site collection URL in client side
• Getting relative Layout URL in client side
• Getting web site URL in client side

when we are developing SharePoint applications. (For an example, creating a custom master page and providing links to content inside the SharePoint).

If we are working with SharePoint  Standard or Enterprise we can  use

< link rel="stylesheet" type="text/css" runat="server" 
  href="<% $SPUrl:~sitecollection/Style%20Library/mystyle.css %>"/>

But to work with SPUrl you need the control to be server control (runat = server).

Other possible URL tokens are:

~site/
~sitecollection/   
~language

There are a few other undocumented Tokens as well.

Other than that you can use _spPageContextInfo JavaScript Objet in all SharePoint versions.

<script type="text/javascript">
function goToLink(link)
{
    location.href = _spPageContextInfo.webServerRelativeUrl + "/" +link ;
}
<script>

Other than that this object gives other properties as well

alertsEnabled: false
allowSilverlightPrompt: "True"
clientServerTimeDelta: -2520
crossDomainPhotosEnabled: false
currentCultureName: "en-US"
currentLanguage: 1033
currentUICultureName: "en-US"
layoutsUrl: "_layouts/15"
pageItemId: 5
pageListId: "{28dd5e46-47d9-4c92-a693-b51119a88146}"
pagePersonalizationScope: 1
serverRequestPath: "/sites/DHub/SitePages/Hm.aspx"
siteAbsoluteUrl: "http://vmsp2013:1111/sites/DHub"
siteClientTag: "64$$15.0.4420.1017"
siteServerRelativeUrl: "/sites/DHub"
systemUserKey: "i:0).w|s-1-5-21-2999116605-2216531513-3474994899-2113"
tenantAppVersion: "0"
userId: 1
webAbsoluteUrl: "http://vmsp2013:1111/sites/DHub"
webLanguage: 1033
webLogoUrl: "_layouts/15/images/siteicon.png"
webPermMasks: Object
webServerRelativeUrl: "/sites/DHub"
webTemplate: "1"
webTitle: "Document Hub"
webUIVersion: 15