Archive

Archive for the ‘ASP.NET’ Category

The Problems with Themes, Skins, and Cascading Style Sheets (CSS) in ASP.NET 2.0 – Using Internal (Embedded) Style Sheets with Themes (Work Around #4)

February 5th, 2007

ASP.NET 2.0′s Themes and Skins have a number of design flaws – Themes and Skins depend almost entirely on Cascading Stye Sheet (CSS), but don’t fully support CSS – I’ve listed some “Work Arounds” for a couple design flaws. I don’t recommend any of these “Work Arounds” since they contribute to software entropy before your application is even developed, instead I suggest sticking with CSS and perhaps using some default Skins that define CSS selectors like classes or IDs.

The Problem / Question:
How can I add Internal (embedded) style sheets (the ones that use the Style element) inside the Head tag when using Master Pages and Themes?  How can I override (overload) External style sheets for local pages or specific Web User Controls?

A Solution / Work Around:

One option is to create an ASP Placeholder (asp:contentplaceholder) in the Master Page’s Head tag to add the Style element into the Head of your Web Form (.aspx page). However, this solution doesn’t work well when using Themes, since themes automatically include the External style sheets after the Style element – I demonstrate this and provide an alternative solution later on in this post.

The Caveat / Warnings:
In most current-generation browsers the loading order for Internal style sheets, and External style sheets depend on their position in the Head tag. This behavior seems to go against what the W3C intended.

Generally speaking we can say that all the styles will “cascade” into a new “virtual” style sheet by the following rules, where number four has the highest priority:

  1. Browser default
  2. External style sheet
  3. Internal style sheet (inside the <head> tag)
  4. Inline style (inside an HTML element)

- Taken from: http://www.w3schools.com/css/css_intro.asp

As I understand and as the w3schools point out (I can’t find a reference from the depths of the W3C), Internal style sheets should have a higher priority than External style sheets, unfortunately this isn’t the reality. Instead External style sheets and Internal style sheets depend on the loading (cascading) order. An Internal style sheet will only override an External style sheet (in current-generation browsers) if the External style sheet is loaded first. This behavior introduces problems when using an ASP Placeholder because ASP.NET automatically includes the Style Sheets (.css) from the active Theme (App_Theme) directories into the Head tag after the ASP Placeholder’s contents have been loaded.

An example of the problem:

The directory structure:

The active Master Page:
<%@ Master Language=”C#” EnableTheming=”true” AutoEventWireup=”true”
CodeFile
=”MasterPage.master.cs” Inherits=”MasterPage” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” >
<
head runat=”server”>
<title>The Problems With Themes and Skins in ASP.NET 2.0</title>

<asp:contentplaceholder id=”ContentPlaceHolderHead” runat=”server” />

</head>
<
body>
<form id=”form1″ runat=”server”>

<h1>Hello World!</h1>

</form>
</
body>
</html>
Note: the ASP Content Place Holder between the Head tags and “Hello World!” between the H1 tags.

The default Web Form (.aspx page) providing the Content for the Master Page’s Content Place Holder:
<%@ Page Language=”C#” Theme=”Default” MasterPageFile=“~/MasterPage.master”
AutoEventWireup
=”true” CodeFile=”Default.aspx.cs” Inherits=”Default” %>

<asp:Content ID=”Content1″ ContentPlaceHolderID=”ContentPlaceHolderHead” Runat=“Server”>

<style type=”text/css”>
H1{
color: red;
}
</style>

</asp:Content>
Note: the Style element between the ASP Content Place Holder tag – H1 should now be colored red.

The contents of StyleSheet.css, the only CSS file in the Active Theme (App_Theme) directory:
H1{
color: blue;
}

Note: H1 should still be red because Internal style sheets are supposed to have priority over External style sheets.

The rendered XHTML:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” >
<
head>
<title>The Problems With Themes and Skins in ASP.NET 2.0</title>

<style type=”text/css”>
H1{
color: red;
}
</style
>

<link href=”App_Themes/Default/StyleSheet.css” type=”text/css” rel=”stylesheet” />

</head>
<
body>
<form name=”aspnetForm” method=”post” action=”Default.aspx” id=”aspnetForm”>
<div>
<input type=”hidden” name=”__VIEWSTATE” id=”__VIEWSTATE” value=”…” />
</div>

<h1>Hello World!</h1>

</form>
</
body>
</html>
Note: the position of the External Style Sheet (the Link element) in relation to the Internal Style Sheet (the Style element) – the Internal style definition (
color: red;) precedes the External style definition (color: blue;).

The results in a web browser:

Note: according to the style sheet priorities in the W3C guidelines (see above) “Hello World!” should be colored red not blue – the Internal Style should be applied before the External Style; however, this is not the case.
Conclusion; the ASP Content Place Holder “Work Around” doesn’t work well with Themes since ASP.NET automatically includes all the CSS files in the active Theme directory – this behavior disrupts the loading (cascading) orders. This “Work Around” could be useful if you were only using Master Pages or were painfully meticulous with your CSS names and made heavy use of the !important style definition.

Another Solution / Another Work Around:
Define the Style element outside the Head tag, directly within the content of your page.

An example of the Work Around:
The rendered XHTML:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” >
<
head>
<title>The Problems With Themes and Skins in ASP.NET 2.0</title>
<style type=”text/css”>
H1{
color: red;
}
</style>
<link href=”App_Themes/Default/StyleSheet.css” type=”text/css” rel=”stylesheet” />
</
head>
<
body>

<style type=”text/css” media=”screen”>
H1{
color: green;
}
</style
>

<form name=”aspnetForm” method=”post” action=”Default.aspx” id=”aspnetForm”>
<div>
<input type=”hidden” name=”__VIEWSTATE” id=”__VIEWSTATE” value=”…” />
</div>
<h1>Hello World!</h1>
</form>
</
body>
</html>
Note: the Style element (color: green;)inside the Body tag.

The results in a web browser:

Note: “Hello World!” is green as expected.
The Pros and Cons to this (the Style element outside the Head tag) approach:
Cons:

  1. It’s not a recommended best practice, but is used by some of the larger sites like Amazon and Yahoo!
  2. It’s not valid XHTML (but neither are iframes in XHTML Strict)

Pros:

  1. Can use Microsoft’s Conditional Comments
  2. Can use the CSS @Import rule
  3. Can use the CSS @Media rule
  4. Can use multiple CSS Media types
  5. Can easily use Media-dependent cascades
  6. Can easily control the CSS load order (inheritance and cascading)
  7. It’s fairly intuitive and understandable
  8. It’s compatible with Revision Control Systems

Conclusion; Themes are a nice addition to ASP.NET, but have some significant design flaws particularly in the way it uses CSS. Themes aren’t recommended for complex web applications that make heavy use of CSS, but for small projects they may be a nice option.

Related posts:

Author: Adam Kahtava Categories: .NET, ASP.NET, CSS, Themes and Skins Tags:

The Problems with Themes, Skins, and Cascading Style Sheets (CSS) in ASP.NET 2.0 – Defining the Load Order (Cascades) for CSS (Work Around #3)

February 3rd, 2007

ASP.NET 2.0′s Themes and Skins have a number of design flaws – Themes and Skins depend almost entirely on Cascading Stye Sheet (CSS), but don’t fully support CSS – I’ve listed some “Work Arounds” for a couple design flaws. I don’t recommend any of these “Work Arounds” since they contribute to software entropy before your application is even developed, instead I suggest sticking with CSS and perhaps using some default Skins that define CSS selectors like classes or IDs.

The Problem / Question:
Is it possible to define the loading order (cascades) of CSS files while using Themes in ASP.NET 2.0?

The Solutions / Work Arounds:
Order your CSS files alphanumerically – ASP.NET 2.0 parses through the active Theme directory and all sub directories alphanumerically including every CSS file into the HTML head (via an external link) of the rendered page.

An example of the problem (when load order isn’t defined).
Note: both examples use the same CSS files, but use different loading orders.

The directory structure and StyleSheets:

The rendered XHTML:
<html xmlns=”http://www.w3.org/1999/xhtml”>
<
head>
<title>The Problems With Themes and Skins in ASP.NET 2.0 </title>
<link href=”App_Themes/Default/Controls/OverloadedUserWebControlStyleSheet.css
type=”text/css” rel=”stylesheet” />
<link href=”App_Themes/Default/Controls/ReusedUserWebControlStyleSheet.css
type=”text/css” rel=”stylesheet” />
<link href=”App_Themes/Default/OverloadedStyleSheet.css
type=”text/css” rel=”stylesheet” />
<link href=”App_Themes/Default/ReusedStyleSheet.css
type=”text/css” rel=”stylesheet” />
</
head>

The results in a web browser:

An example of the problem (when load order has been defined alphanumerically).

The directory structure and StyleSheets:

Note: the use of alphanumeric delimiters preceding the Style Sheet names.

The rendered XHTML:
<html xmlns=”http://www.w3.org/1999/xhtml”>
<
head>
<title>The Problems With Themes and Skins in ASP.NET 2.0 </title>
<link href=”App_Themes/Default/aa_ReusedStyleSheet.css
type=”text/css” rel=”stylesheet” />
<link href=”App_Themes/Default/Controls/01_ReusedUserWebControlStyleSheet.css
type=”text/css” rel=”stylesheet” />
<link href=”App_Themes/Default/Controls/09_OverloadedUserWebControlStyleSheet.css
type=”text/css” rel=”stylesheet” />
<link href=”App_Themes/Default/zz_OverloadedStyleSheet.css
type=”text/css” rel=”stylesheet” />
</
head>

Note: the ordering of the CSS files.

The results in a web browser:

Comparing the web browser results:

The Pros and Cons to this approach:

Cons:

  1. Being a work around it’s not intuitive _ a maintenance programmers nightmare – “I’m familiar with CSS, but how are the Cascading Style Sheets being loaded??”
  2. Contributes to a fragile environment – the way ASP.NET parses through the App_Themes directories may change in newer versions of ASP.NET, not to mention changing a filename could have negative side effects on the site’s design.

Pros:

  1. Allows a load order to be defined
  2. Compatible with Revision Control Systems

In conclusion; Themes are a nice addition to ASP.NET, but have some significant design flaws particularly in the way it uses CSS. Themes aren’t recommended for complex web applications that make heavy use of CSS, but for small projects they may be a nice option.

Related posts:

Author: Adam Kahtava Categories: .NET, ASP.NET, CSS, Themes and Skins Tags:

Underscore (_) rendering issues with Cascading Style Sheets (CSS) in Internet Explorer (IE), Firefox, and other browsers

January 7th, 2007

The World Wide Web Consortium (W3C) Cascading Style Sheets (CSS) 2 specifications introduced the underscore (_) as a valid CSS naming character, this allows CSS selectors like class selectors and ID selectors to be named like:

  • ._menu_item_1
  • #_menu_item_2
  • .menu_item_3
  • #menu_item_4

However; rendering inconsistencies remain among most popular browsers when Styles, Classes, or IDs are preceded by the underscore character.

Inconsistencies:

CSS Classes and IDs with an underscore immediately after their respective delimiter (‘.’ Or ‘#’) are rendered by both Firefox and Opera, but NOT by Internet Explorer.
This CSS example will NOT work in Internet Explorer, but WILL work in Firefox and Opera:

._idTest1{
background-color: red;
}
#_id_Test2{
background-color: red;

Style entries preceded by an underscore are rendered by Internet Explorer (IE 6 & 7), but NOT by Mozilla / Gecko (Firefox) or Opera.

This CSS example will only work in Internet Explorer:

*{
_color: green;
}

This is a documented quirk and bug, see The Underscore Hack and IE Underscore Bug Test for more information.

The Results of our Underscored CSS in Internet Explorer:

The Results of our Underscored CSS in FireFox (rendered the same in Opera):

This CSS quirk came up in an ASP.NET forum, where a poster was having cross browser issues with his menu controls. We discovered that <xhtmlConformance mode=”Legacy” /> was defined in his web.config file which caused the ASP.NET Master Page control (ctl00) to be preceded by an underscore (_ctl00) which was preventing the CSS from being rendered in IE.

Related links:
The IE Underscore Bug Test
The original forum thread: menu control in master page does not get styles in ie 6.0.
ScottGu’s Blog: Gotcha: Don’t use <xhtmlConformance mode=”Legacy”/> with ASP.NET AJAX
View the complete source code for my Underscore Test or try it on your favorite browser here.

Author: Adam Kahtava Categories: .NET, ASP.NET, CSS, DOM, Firefox, IE Tags:

The Problems with Themes, Skins, and Cascading Style Sheets (CSS) in ASP.NET 2.0 – Defining a Media Type(s) (Work Around #2)

November 11th, 2006

ASP.NET 2.0′s Themes and Skins have a number of design flaws – Themes and Skins depend almost entirely on Cascading Stye Sheet (CSS), but don’t fully support CSS – I’ve listed some “Work Arounds” for a couple design flaws. I don’t recommend any of these “Work Arounds” since they contribute to software entropy before your application is even developed, instead I suggest sticking with CSS and perhaps using some default Skins that define CSS classes or IDs.

The Problem / Question:
Is it possible to define CSS Media types (like media=”print”) in the HTML Head tag? ASP.NET 2.0 automatically includes all my CSS files (from the active Theme directory) into the HTML Head tag, but Themes don’t allow me to specify any CSS Media types.

The Solutions / Work Arounds:
Sub class the HtmlHead class to enumerate through the child controls and add new Meta attributes to the child controls using the HtmlLink class. In order to use multiple Media types you would probably need to use more complex logic and resolve Media types to filenames (i.e. SomeFileName_Print.css could resolve to media=”print”) – for more information on manipulating the HtmlHead class read Phil Scott’s post titled: Accessing the Html Header in ASP.NET 2.0.

An example of the problem:
The HTML source automatically generated by ASP.NET 2.0 Themes (note the lack of media attributes):
<head>
<title>The Problems With Themes and Skins in ASP.NET 2.0 </title>
<link href=”App_Themes/Default/HandHeld.css”
type=”text/css” rel=”stylesheet” />
<link href=”App_Themes/Default/Print.css”
type=”text/css” rel=”stylesheet” />

<link href=”App_Themes/Default/Screen.css”
type=”text/css” rel=”stylesheet” />

</head>

My desired HTML source (note the media attributes in bold):
<head>
<title>The Problems With Themes and Skins in ASP.NET 2.0 </title>
<link href=”App_Themes/Default/Default.css”
type=”text/css” rel=”stylesheet” media=all />
<link href=”App_Themes/Default/HandHeld.css”
type=”text/css” rel=”stylesheet” media=handheld />
<link href=”App_Themes/Default/Print.css”
type=”text/css” rel=”stylesheet” media=print />
<link href=”App_Themes/Default/Screen.css”
type=”text/css” rel=”stylesheet” media=screen />
</head>

The Pros and Cons of this approach:

Cons:

  1. Can’t use Microsoft’s Conditional Comments
  2. Can’t use the CSS @Import rule
  3. Can’t use the CSS @Media rule
  4. Can’t easily use multiple CSS Media types
  5. Can’t easily control CSS preferred and alternate style sheets
  6. Can’t easily control the CSS load order (inheritance and cascading)
  7. Contributes to a fragile environment
  8. Not intuitive _ a maintenance programmers nightmare – “I know CSS, but Where are the Media types defined and How are they controlled?”

Pros:

  1. Can define a single Media type for all .css files relatively easy
  2. Could define multiple Media types – with more complex logic dependant on .css file naming
  3. Could control CSS preferred and alternate style sheets – with more complex logic dependant on .css file naming
  4. Compatible with Revision Control Systems (CVS, Subversion, Visual Source Safe, and so on)

In conclusion; CSS will continue to be the industry design standard – it has been the standard for well over 10 years. CSS is far more powerful than Themes and Skins, I suggest sticking with CSS and perhaps using some default Skins that define CSS classes or IDs.

Related posts:

Author: Adam Kahtava Categories: .NET, ASP.NET, CSS, Themes and Skins Tags:

The Problems with Themes, Skins, and Cascading Style Sheets (CSS) in ASP.NET 2.0 – Excluding a CSS folder (Work Around #1)

November 9th, 2006

ASP.NET 2.0′s Themes and Skins have a number of design flaws – Themes and Skins depend almost entirely on Cascading Stye Sheet (CSS), but don’t fully support CSS – I’ve listed some “Work Arounds” for a couple design flaws. I don’t recommend any of these “Work Arounds” since they contribute to software entropy before your application is even developed, instead I suggest sticking with CSS and perhaps using some default Skins that define CSS classes or IDs.

The Problem / Question:
How can I exclude a subdirectory (sub folder) containing Cascading Style Sheets (CSS) in a Theme (App_Theme) directory? ASP.NET 2.0 automatically includes all CSS files (.css) from the active Theme directory and sub directories into the rendered HTML page, but doesn’t allow me to exclude a folder of CSS files or a single CSS file.

The Solutions / Work Arounds:

  1. Create your CSS directory outside the App_Theme directory then map a Virtual Directory inside your Theme directory.
  2. Add a custom VirtualPathProvider to ignore the non-root level CSS files in sub directories  – See David Ebbo’s article titled: Overriding ASP.NET combine behavior using a VirtualPathProvider.

These “Work Arounds” are useful if you want to do something like this (note: Default.css is sitting in the root of the active Theme directory):

/* Default.css */
@ImportStyleSheets/Common.css “;
@ImportStyleSheets/Masterpage.css”;
<!–[if IE]>
@Import “StyleSheets/FixInternetExplorer_Quirks.css”;
<![endif]–>
<!–[if IE 7]>
@Import “StyleSheets/FixInternetExplorer7Quirks.css”;
<![endif]–>

Or if you wanted to use an Embedded CSS Statement like this:

<style type=”text/css”>
<!
@Import “StyleSheets/HideNavigation.css”;
@Import “StyleSheets/HideSearchBars.css”;
>
</style>

The Pros and Cons of this approach:

Cons:

  1. Can’t really define CSS media types, but we can now use the CSS @Media rule
  2. Can’t control CSS preferred and alternate style sheets
  3. Doesn’t scale well
  4. Contributes to a fragile development environment
  5. Not very compatible with Revision Control Systems (CVS, Subversion, Visual Source Safe, and so on)
  6. Not intuitive _ a maintenance programmer’s nightmare, “I know CSS, but Where is the CSS folder?” or “I know CSS, but Why and How are some CSS folders excluded?

Pros:

  1. Can control the load order (inheritance and cascading) through the CSS @Import rule
  2. Can exclude a folder containing CSS files
  3. Can use the CSS @Import rule
  4. Can use the CSS @Media rule
  5. Can use Microsoft’s conditional comments


In conclusion;
CSS will continue to be the industry design standard – it has been the standard for well over 10 years. CSS is far more powerful than Themes and Skins, I suggest sticking with CSS and perhaps using some default Skins that define CSS classes or IDs.

Related posts:

Author: Adam Kahtava Categories: .NET, ASP.NET, CSS, Themes and Skins Tags:

The Problems with Themes, Skins, and Cascading Style Sheets (CSS) – Where it all Falls Apart

November 8th, 2006

Themes and Skins are a promising addition to ASP.NET 2.0, but too immature for large web projects.

The problem with Themes and Skins begins with the way Cascading Style Sheets (CSS) are automatically included into the rendered page. Through compilation logic, ASP.NET 2.0 parses through the directory and sub directories of the active Theme. ASP.NET 2.0 automatically includes an external CSS file reference into the HTML Head tag of the rendered page for every CSS file encountered.

Here’s an example for a better understanding.

My directory structure:

The output generated by Themes from the preceding directory structure:

<head> 
 <title>The Problems With Themes and Skins in ASP.NET 2.0 </title> 
 <link href="App_Themes/Default/HandHeld.css"
   type="text/css" rel="stylesheet" /> 
 <link href="App_Themes/Default/Print.css" 
   type="text/css" rel="stylesheet" /> 
 <link href="App_Themes/Default/Screen.css" 
   type="text/css" rel="stylesheet" /> 
 <link href="App_Themes/Default/StyleSheets/FixInternetExplorer7Quirks.css"
   type="text/css" rel="stylesheet" /> 
 <link href="App_Themes/Default/StyleSheets/FixInternetExplorerQuirks.css" 
   type="text/css" rel="stylesheet" /> 
 <link href="App_Themes/Default/StyleSheets/HideAdvertisments.css" 
   type="text/css" rel="stylesheet" />
 <link href="App_Themes/Default/StyleSheets/HideBorders.css" 
   type="text/css" rel="stylesheet" />
 <link href="App_Themes/Default/StyleSheets/HideMenus.css" 
   type="text/css" rel="stylesheet" />
</head>

As you can see, the external CSS file references are automatically included in the rendered page – the load order of CSS files seems to depend on the directory and CSS file name. In this example the root directory is parsed alphabetically then the sub directory is parsed alphabetically.

It’s neat how ASP.NET 2.0 automatically includes .css files, but this behavior severely limits the use of CSS (see the list below), and encourages developers / designers to create many .css files which introduces new problems – Internet Explorer has a 30 style sheet limitation, see article Q262161.

Problems:

  • As the name implies Cascading Style Sheets (CSS) depend on the order in which files are loaded (cascades), in addition to other rules like the CSS @import and CSS @Media rule. By automatically loading all .css files into the header, Themes prevent cascades and loading order from being defined.
  • The automatic inclusion of .css files prevents the use of Microsoft’s Conditional Comments.
  • The automatic inclusion of CSS files omits the CSS Media type.

A rough list of CSS features compromised by Themes in ASP.NET 2.0:

  1. CSS media types
  2. The CSS @Import rule
  3. The CSS @Media rule
  4. Preferred and alternate style sheets
  5. Media-dependent cascades
  6. Inheritance and cascading
  7. The use of Microsoft’s Conditional Comments

An example of when these compromised features are useful:

<head>
  <title>The Problems With Themes and Skins in ASP.NET 2.0 </title>
  <link href="App_Themes/Default/HandHeld.css" 
    type="text/css" rel="stylesheet" media="handheld" />
  <link href="App_Themes/Default/Print.css" 
    type="text/css" rel="stylesheet" media="print" />
  <link href="App_Themes/Default/Screen.css" 
    type="text/css" rel="stylesheet" media="screen" />
  <!--[IF IE]>
    <link href="App_Themes/Default/StyleSheets/FixInternetExplorerQuirks.css" 
      type="text/css" rel="stylesheet" media="all" />
  <![endif]-->
  <!--[IF IE 7]>
    <link href="App_Themes/Default/StyleSheets/FixInternetExplorer7Quirks.css" 
      type="text/css" rel="stylesheet" media="all" />
  <![endif]-->
</head>

The contents of Print.css or HandHeld.css would generally look something like this:
/* Contents of Print.css or HandHeld.css*/

@Import “App_Themes/Default/StyleSheets/HideAdvertisments.css”;
@Import “App_Themes/Default/StyleSheets/HideBorders.css”;
@Import “App_Themes/Default/StyleSheets/HideMenus.css”;

In conclusion; Themes have a number of design flaws which limit a significant portion of CSS’s mature feature set. Themes are OK for small web applications, but not recommended for large / complex applications. While there are “work arounds” for some of the issues on my list, implementing each “work around” contributes to software entropy before your application is even developed. Since Skins and Themes are really based around CSS you might be better off sticking with CSS and a single default ASP.NET 2.0 Skin in which you define some default CSS classes or ID elements for some basic ASP.NET server controls.

Related notes:

Rick Strahl came to a similar conclusion:

theming is nice but really most of that can be accomplished with CSS and what Themes offers beyond that is really not that critical. [...] As it stands I don’t really see how I can utilize Themes in my apps in a meaningful way. – Playing around with ASP.NET Themes

Scott Allen makes a great point:

Web designers will be more comfortable with css files. If you put the design of your site into the hands of professionals than you should be asking them to use css wherever possible. – Themes In ASP.NET 2.0

Richard P makes a related comment:

there are so many flaws in Themes and how they use CSS I dont know where to begin! [...] The concept of CSS and the web skin has been around for some years, and we have been building great solutions despite Visual Studio and ASP.NET. – Themes and Skins Flawed in ASP.NET 2.0

Learn more about Themes and Skins here: A Quick Tour of Themes in ASP.NET 2.0.

Related posts:

Author: Adam Kahtava Categories: .NET, ASP.NET, CSS, Themes and Skins Tags:

A Reflection on Themes, Skins, and Cascading Style Sheets (CSS) in ASP.NET 2.0 (Part 2)

October 30th, 2006

Themes and Skins depend on Cascading Style Sheets (CSS) and HTML / XHTML, but Themes and Skins don’t fully support CSS – now that’s a paradox.

HTML, XHTML, XML, and other related Markup Languages can all be manipulated through CSS – ASP.NET generates most of these languages. If your not yet familair with ASP.NET 2.0 Themes and Skins: Skins give developers and designers a little more precision to manipulate server side controls like datagrids, and calendars, but Skins fundamentally depend on CSS. Themes allow us to group our Skins, CSS files, graphics / images, and so on into logical groups or directories, but Themes really depend on CSS through Skins and CSS (.css) file references.

Both ASP.NET Themes and Skins are directly dependent on Cascading Style Sheets (CSS). However; Themes and Skins prohibit a good deal of CSS’s functionality – I’ll discuss this is my next post. CSS has been with us for over a decade, it’s a pretty powerful display mechanism for web applications. CSS can manipulate HTML, XHTML, XML, SVG, XUL and other common Markup Languages.

I’ve come up with a number Theme and Skin related questions that I have yet to answer.

Questions:

If Themes and Skins rely on CSS why not just use CSS?
Answer: Default Skins are good, they provide hooks (class and ID selectors) for defining CSS. Themes are OK they let us logically group images and design related files, but fall short in a number of areas and are not recommended for large web applications. 

If it’s possible to accomplish all that Skins and Themes offers through CSS why should I make the switch?
Answer: Skins can make life easier for your web designers, when used to hook into CSS classes and ID selectors.

CSS is a mature, robust language, it’s been around for over 10 years so more designers / developers are familiar with it, why should I switch to a a technology that is unfamiliar to most of the people that will be maintaining the application?
Answer: It’s not a clear case of CSS vs Themes since you really can’t have Themes without CSS. If used properly Themes can augment CSS.

Are Themes and Skins really scalable for a large enterprise level web application?
Answer: Not really, having a seperate server or Content Delivery Network for site resources like images, stylesheets, etc… is probably the best approach. Themes and Skins do prove uesful for small web applications.

Author: Adam Kahtava Categories: .NET, ASP.NET, CSS, Themes and Skins Tags:

A Reflection on Themes, Skins, and Cascading Style Sheets (CSS) in ASP.NET 2.0 (Part 1)

October 29th, 2006

While Themes and Skins are new to ASP.NET 2.0, the underlying concepts have been around for a long time. For those unfamiliar with Themes and Skins, skins give web designers greater flexibility to manipulating ASP.NET server side controls (calendars, datagrids, etc…) through Styles / Cascading Style Sheets (CSS). Themes logically group the design tier of an application into a common folder or directory (a Theme folder(s)), giving developers the ability to programmatically change (swap), or expose these Themes to the user.

Learn more: ASP.NET Themes and Skins Overview.
See a live example here: ASP.NET 2.0 Colorful Web Site Starter Kit.

The concept of interchanging layout and changing design styles (Themes) has been around for quite some time. The W3C Recommendation for Style Sheets in HTML documents outlines the “alternate stylesheet” that should be interchanged through the browsers menu; unfortunately Internet Explorer (IE) fails to support this method.

An example: changing style sheets with a Mozilla based browser (Firefox).


See the live example (if you’re not using IE) at: www.damowmow.com.

Other methods for changing design layouts (Themes) range from Client Side Scripts (JavaScript) to Server Side Scripts (ASP, PHP, ASP.NET, and so on).

Learn more about style interchanging scripts and more here: Style Switching – css-discuss.

Themes and Skins are a welcome addition to ASP.NET 2.0, they offer a simple solution for grouping design specific files, and a nice way to programmatically change these Themes. However; this simplistic approach significantly hampers the power of Cascading Style Sheets _ I’ll discuss my difficulties / problems in subsequent posts.

Author: Adam Kahtava Categories: .NET, ASP.NET, CSS, Firefox, Themes and Skins Tags:

A reflection on Cascading Style Sheets (CSS)

October 12th, 2006

I’ve been using Cascading Style Sheets (CSS) since the mid 90′s. The lack of consistent support across browsers had always impeded my shift from table based design to CSS design. When I did make the transition, I can clearly recall the frustration, and confusion that preceded. Lately I’ve been using Themes and Master Pages (ASP.NET 2.0) with CSS. Personally I don’t like how .NET automagically inserts the CSS file references into the header. Much of CSS’s power is determined by the loading order, and the ability to define separate CSS files for Internet Explorer (IE).

I’ve compiled a list of techniques I find useful when developing CSS:

When designing my CSS I try to use a browser that is W3C compliant (Firefox, Opera), I then apply fixes for the many quirks found in IE.
I find it easier to develop CSS in a text editor, rather than a WYSIWIG editor – perhaps I’m a bit of a standards geek, but I like to thoroughly understand a technology rather than rely on wizards, etc…

By inserting the code below into a webpage’s header you define a CSS file that will only be loaded by IE, this is great for fixing display issues in IE by overloading the effected CSS elements.
<!–[if IE]>
       <link href=”IEQuirkFixFile.css” rel=”stylesheet”
            type=”text/css” media=”all” />

<![endif]–>

You can also define different CSS files for different media types like a printer, letting us hide content (like navigation menus) that you don’t want printed.
<link href=“HideAllNavigationalContent.css” rel=“stylesheet” type=“text/css” media=“print” />

You can specify other media types like: Braille, handheld, projection, tv, and so on. See more media types here: http://www.w3.org/TR/REC-CSS2/media.html#media-types

CSS can be applied in 3 different ways: Inline, Embedded, and External (Linked or Imported). It’s nice to keep everything in external files as this method promotes a more n-tier approach even in the presentation level, but I also find it convenient to override classes through CSS Embedded blocks.

An example:
The following Embedded CSS will hide a Navigation menu, and increase the Content pane to 100% when inserted into webpage. Using a combination of Embedded and External CSS can allow us to use a single Master Page.

<style type=“text/css”>
<!–
    #Navigation
    {
        display: none;
    }
    #MainContent
    {
       max-width: 100%;
       width: 100%;
    }
–>
</ style>

CSS coupled with SVG (Scalable Vector Graphics) and Extensible Markup Language (XML) is becoming an increasingly powerful technology, and most web applications under the Web 2.0 (alternatively known as Chmod 777 web or the Read / Write Web) use CSS, XHTML, AJAX, Clean and meaningful URLs (URL Rewriting), and so on.

View a SVG example: http://www.w3schools.com/svg/svg_examples.asp

Related links:
Cascading Style Sheets Home Page
CSS Zen Garden

Author: Adam Kahtava Categories: .NET, ASP.NET, CSS Tags:

Resolving Parser Errors: Unknown server tag ‘atlas:ScriptManager’ in ATLAS (AJAX)

September 17th, 2006

I encountered a number of Parse Error Messages while implementing the Accordion control from ATLAS.

The error messages read:
Parser Error Message: Unknown server tag ‘atlas:ScriptManager’. 

Source Error:  <atlas:ScriptManager id=”ScriptManager” runat=”server” />

This message occured for a number of different reasons, this brief checklist should resolve your parse errors.

1) Ensure that the following assemblies are in your bin directory:
AtlasControlToolkit.dll
Microsoft.AtlasControlExtender.dll
Microsoft.Web.Atlas.dll

2) Ensure that the following has been added to your web.config file

<pages>
  <
controls>
    <
add namespace=Microsoft.Web.UI
         assembly=Microsoft.Web.Atlas tagPrefix=atlas/>
   
<
add namespace=Microsoft.Web.UI.Controls
         assembly=Microsoft.Web.Atlas tagPrefix=atlas/>
   
<
add namespace=AtlasControlToolkit
         assembly=AtlasControlToolkit tagPrefix=atlasToolkit/>
 
</
controls>
</
pages>

Related links:
Data Binding in an AccordionPane in a Repeater
Atlas Control Toolkit: Unknown Server Tag

Author: Adam Kahtava Categories: .NET, AJAX, ASP.NET, ASP.NET AJAX Tags: