Get CSS/JS Intellisense In ASP.NET WebForms Using Visual Studio 2013

In Visual Studio 2013, CSS files that are included in your project/solution will now automatically be parsed and all HTML documents will gain CSS class intellisense.

But:

ASPX and other WebForm files using the legacy editor do not benefit from this implementation in VS 2013, but may adopt the new system in future releases.

But you can still use this feature as follows:

  1. right click on the “default.aspx” file in the Solution Explorer
  2. “open with”
  3. select “HTML Editor”
  4. “ok”

Source

 

Why Does Visual Studio Not Resolve My CSS Class Names or JS Method Names?

“Site-Relative Paths are NOT supported by Visual Studioā€¯. So this was the solution to why I was not getting intellisense in my css. I always use site relative paths for my css files so I needed to add this line in to get Visual Studio to find my css files:

<%--To allow Visual Studio to resolve css class names for Intellisense support, css file path references must be absolute     --%>
    <% if (false) {%>
    <link href="../css/global/app.css" rel="stylesheet" />
    <link href="../css/global/base.css" rel="stylesheet" />
    <% } %>

So now with absolute reference to the css files wrapped inside of the if(false) statement, Visual Studio will be able to find the css file which contains the intellisense information however these file references won’t render on the website since they are wrapped in an if statement that never will resolve to true.

This concept can also be applied to js files and intellisene for methods.

Source

Override Inline Styles with CSS (!important)

Ideally you shouldn’t use inline styles, If you’re faced with a situation where they exist and you’d like to override the inline css with that from a stylesheet you can do so using !important.

CSS:

#example p {
    color: blue !important;
}

HTML:

<div id="example">
  <p style="color:green;">This paragraph has an inline style</p>
</div>

In the above example, the paragraph will have blue text and not green as in the inline style because of the !important declaration in the CSS.

Note: Internet Explorer 6 will apply whatever the last style declared is, and takes no notice of !important declarations.

Create Active/Current Menu Item In MVC3 / Razor

Add an HTML Helper:

 /// <summary>
        /// Helper to build a menu system with current/active context
        /// </summary>
        /// <param name="htmlHelper">The HTML helper.</param>
        /// <param name="linkText">The link text.</param>
        /// <param name="actionName">Name of the action.</param>
        /// <param name="controllerName">Name of the controller.</param>
        /// <returns></returns>
        public static MvcHtmlString MenuLink(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName)
        {
            string currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action");
            string currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller");
            if (actionName == currentAction && controllerName == currentController)
            {
                return htmlHelper.ActionLink(
                    linkText,
                    actionName,
                    controllerName,
                    null,
                    new
                    {
                        @class = "current"
                    });
            }
            return htmlHelper.ActionLink(linkText, actionName, controllerName);
        }

Add this to your master page for the navigation elements

<nav>
            <div id="nav">
                <ul id="menu">                 
                    <li>@Html.MenuLink("Search", "Search", "Colleague")</li>
                    <li>@Html.MenuLink("Favorites", "Index", "Favorites")</li>
                </ul>
                </div>
            </nav>     

CSS to style current/active nav item

#nav ul li a.current {
	background-color:#ccc;
	color:#000;
}

How Modernizr Works

Modernizr is pretty neat. If the browser supports a feature, it tags it with a css class at the base root level, basically appending to the html class attribute.
example:

<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop no-websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

And then in your CSS you leverage that hierarchy
example:

.cssgradients .searchResultItem 
{
background: #f4f4f4;
background: -moz-linear-gradient(top, #f4f4f4 0%, #e0e0e0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#e0e0e0));
background: -webkit-linear-gradient(top, #f4f4f4 0%,#e0e0e0 100%);
background: -o-linear-gradient(top, #f4f4f4 0%,#e0e0e0 100%);
background: -ms-linear-gradient(top, #f4f4f4 0%,#e0e0e0 100%);
background: linear-gradient(top, #f4f4f4 0%,#e0e0e0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#e0e0e0',GradientType=0 );
}
.borderradius .searchResultItem {	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

If CSS Gradients aren’t supported by the browser it doesn’t get added to the root HTML CSS class and there for won’t get styled as the CSS hierarchy is broken.

ToolTip Hover Balloon’s Via CSS

CSS

/* ToolTip Balloon */
.balloon a:link span{display: none; }
.balloon a:visited span{display: none; }
.balloon a img { border: 0px; }
.balloon a:hover span {
    position: absolute;
    margin:5px 0px 0px 5px;
    background-color: beige;
    max-width:400px;
    padding: 2px 10px 2px 10px;
    border: 1px solid #C0C0C0;
    font: normal 10px/12px verdana;
    text-decoration: none;
    color: #000;
    text-align: left;
    display: block;     
}
.balloon .innerText { width: 300px;  }

ASP.NET

<span class="balloon">
<a href="Javascript:void(0)">
   <img src="../Images/information.png"  />
   <span class="innerText">Type in the JHA ID and click find. Please note, all other fields
                                    will be ignored when using the JHA ID field. 
   </span>
</a>
</span>

Source

Nice And Simple Image Rollover Implementation

Include this script on your page
then make image rollovers simple like:

<img src="/images/ss_img.gif" oversrc="/images/ss_img_over.gif">
// This is the implementation of SimpleSwap
// by Jehiah Czebotar
// Version 1.1 - June 10, 2005
// Distributed under Creative Commons
//
// Include this script on your page
// then make image rollovers simple like:
// <img src="/images/ss_img.gif" oversrc="/images/ss_img_over.gif">
//
// http://jehiah.com/archive/simple-swap
// 


function SimpleSwap(el,which){
  el.src=el.getAttribute(which || "origsrc");
}

function SimpleSwapSetup(){
  var x = document.getElementsByTagName("img");
  for (var i=0;i<x.length;i++){
    var oversrc = x[i].getAttribute("oversrc");
    if (!oversrc) continue;
      
    // preload image
    // comment the next two lines to disable image pre-loading
    x[i].oversrc_img = new Image();
    x[i].oversrc_img.src=oversrc;
    // set event handlers
    x[i].onmouseover = new Function("SimpleSwap(this,'oversrc');");
    x[i].onmouseout = new Function("SimpleSwap(this);");
    // save original src
    x[i].setAttribute("origsrc",x[i].src);
  }
}

var PreSimpleSwapOnload =(window.onload)? window.onload : function(){};
window.onload = function(){PreSimpleSwapOnload(); SimpleSwapSetup();}

Source: http://jehiah.cz/a/simple-swap