Archive

Archive for February, 2007

The Problems with Themes, Skins, and Cascading Style Sheets (CSS) in ASP.NET 2.0 – Creating Printer Friendly Pages (defining a CSS Print Media Type) with CSS While Using Themes (Work Around #5)

February 25th, 2007

In this post I outline a couple alternate ways of defining the CSS Print Media Type with Themes. ASP.NET 2.0′s Themes and Skins have a number of design flaws – Themes and Skins depend almost entirely on Cascading Style Sheets (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 use the CSS Print Media Type with Themes? In the past I’ve used an External Style Sheet which defined the Print Media Type, but ASP.NET 2.0 omits the Media Type attribute when it automatically includes all my CSS files (from the active Theme directory) into the HTML Head tag.

A Solution / Work Around:
The Print Media Type isn’t constrained to External Style Sheets and can be defined in the Style Element, in the @Media rule, and even specified through the @Import rule.

An example of the problem:

The directory structure:

The rendered XHTML:
<head>
<title>The Problems With Themes and Skins in ASP.NET 2.0</title>
<link href=“App_Themes/Default/PrinterFriendlyStyleSheet.css”
type=”text/css” rel=”stylesheet” />
<link href=“App_Themes/Default/StyleSheet.css”
type=”text/css” rel=”stylesheet” />
</head>
Note each externally linked Style Sheet lacks a media type.

Our desired XHTML (using an Externally Linked Style Sheet and a Print Media Type) would have looked something like this:
<head>
<link href=“App_Themes/Default/PrinterFriendlyStyleSheet.css”
type=”text/css” rel=”stylesheet” media=”all” />
<link href=”App_Themes/Default/PrinterFriendlyStyleSheet.css”
type=”text/css” rel=”stylesheet” media=”print” />
</head>
Note the Media Type (media=”print”) in bold.

The solutions:

Option 1. Use the Media Rule (@Media) to define the print Media Type inside an Externally Linked Style Sheet.

An example:
@Media Print {
body {
background-color: #FFFFFF;
}
/*… your CSS here …*/
#Menu, #AdvertismentContainer {
display: none;
}
#Content {
width: 100%;
}
}
Discussion: This is probably the best alternative to defining the Media Type in an Externally Linked Style Sheet – the other solutions introduce problems of their own.

Option 2. Use the Import Rule (@Import) to load your printer friendly Style Sheet from an alternate location and define a Media Type – this involves removing your printer friendly Style Sheet from the Themes (App_Theme directory).

An example:
@Import url(“/AppName/CSS/PrinterFriendlyStyleSheet.css”) Print;

Discussion: This solution requires moving our Printer Friendly Style Sheet outside the Theme directory, since Themes don’t allow us to exclude a Style Sheet folder (see Excluding a CSS folder for more details). Once we start moving Style Sheets outside the Themes directory we should probably ask ourselves why we’re even using Themes, and consider regaining complete control over our CSS by moving all the CSS files outside the Theme directory. At this point we could revert to Externally Linking our Style Sheets where we could define our Media Type attributes. In addition the CSS URL function used in this solution confuses many.

Option 3. Use the Style Element to define a Print Media Type.

An example:
<style type=”text/css” media=“print”>
/*… your CSS here …*/
</style>

Discussion: This solution doesn’t work if the Style Elements are defined in the HTML head (see Using Internal (Embedded) Style Sheets with Themes for more details), you can however move the Style Element into the Body of the document, this compromises the HTML validation, but large e-commerce sites like Amazon and Yahoo! make heavy use of this method.

Option 4. Sub class the HtmlHead class to enumerate through the child controls and add new Meta attributes to the child controls using the HtmlLink class. See my post titled Defining a Media Type(s) for more details.
Discussion: This solution requires a fair amount of work and only solves one of the many problems with Themes, pursuing this solution would probably be a case of not seeing the forest for the trees.

In conclusion; Themes are a nice addition to ASP.NET, but have some significant design flaws particularly in the way it uses CSS – in this case how printer friendly (print) CSS Media Types are defined. I wouldn’t recommend using Themes on a complex web applications that make heavy use of CSS or AJAX, but for small projects they may be a nice option.

Related links:

Related posts:

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

Points of Interest: ACM CareerNews: Thursday, February 22, 2007

February 24th, 2007

“Business Acumen: The New Must-Have Skill” Datamation, February 13

business acumen, rather than technological expertise, is the new must-have skill for IT professionals. Simply put, IT specialists who lack a familiarity with business integration have fewer advancement opportunities. Technology professionals who take the initiative to gain a big-picture view of the business have a broader set of employment opportunities. Typically, they are able to work and communicate effectively with colleagues in all departments and have a solid appreciation of how IT initiatives can drive business change. … 41% of CIO respondents said they are putting more emphasis on business fundamentals when evaluating IT candidates … Business savvy makes you eligible for a wider range of opportunities, whether you plan to stay with one company for years or are looking for a new opportunity. Management roles, in particular, require knowledge of business fundamentals, especially a basic knowledge of finance, marketing and management. A business background can also insulate you from changes in the industry, such as outsourcing. This business acumen is also transferable if you ever decide to pursue a path outside of IT. That being said, business savvy does not replace the specialized technical skills businesses need from IT professionals.
http://itmanagement.earthweb.com/career/article.php/3659496 

“Generation X: Stepping Up to the Leadership Plate” CIO.com, January 31

Currently, Baby Boomers control some of the most powerful leadership positions throughout the United States, but that will change over the next 15 years. … members of Generation X have received very little training, development or mentoring in the workplace, and are better at learning on the fly. … Organizations will need to bridge this generational gap in order to drive business success. For example, they need to emphasize emerging leader training and mentoring programs and encourage members of Generation X to learn more about the leadership skills and industry connections of the Baby Boomer generation.
http://www.cio.com/career/boost/column.html?ID=28475&source=nlt_cioleader 

“More Employers Recruit the Military Work Ethic” USA Today, February 16

In an effort to hire workers with a strong work ethic, leadership skills and diverse backgrounds, employers are increasingly turning their attention to the military. … The perception of military veterans is that they are very conscientious, eager to work, and team players. In addition, they typically have excellent skills and first-rate technical training. … The perception of military veterans is that they are very conscientious, eager to work, and team players. In addition, they typically have excellent skills and first-rate technical training.
http://www.usatoday.com/money/workplace/2007-02-16-vets-usat_x.htm?csp=34 

“Battle of the Ages” Network World, February 1

As many IT executives either knowingly or unknowingly turn away from older workers in favor of 20-somethings, organizations are being forced to confront a mounting demographic problem. … Instead of hiring purely on the basis of technical skills, for example, they also consider factors such as personality, inter-personal skills and communication ability. .. younger workers can pick up the accumulated business acumen of the older workers.
http://www.networkworld.com/careers/2007/020507-careers-generations.html 

“How One Bad Apple Can Create a Toxic Team” Management Issues, February 14

Within any organization, the presence of even one person who exhibits negative behavior can affect the rest of the group, pulling down productivity and efficiency. In short, people who do not do their fair share of the work, who are chronically unhappy and emotionally unstable, or who bully or attack others can infect a team and create the environment for organizational dysfunction. … the bad apple problem is prevalent in nearly every business organization in nearly every sector. … The problem, say the researchers, is that most organizations do not have very effective ways to handle the problem, especially when the problem employee has longevity, experience or power. … As a result, trust in the team deteriorates and as the group loses its positive culture, members physically and psychologically disengage themselves from the team.
http://www.management-issues.com/2007/2/14/research/how-one-bad-apple-can-create-a-toxic-team.asp 

Original source: http://www.acm.org/careernews/issues/v2_i26.html

Author: Adam Kahtava Categories: Career News Tags:

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:

Points of Interest: ACM CareerNews: Tuesday, January 23, 2007

February 4th, 2007

“Five Tips for Staying Employed in IT Through 2010″ Datamation, January 12

by 2010, six out of ten IT workers will assume business-facing roles. … IT workers will need to increase their business savvy and adapt to business relationship management and business analyst roles. … companies will seek and develop versatile performers while de-emphasizing the role of specialists.
http://itmanagement.earthweb.com/career/article.php/3653581 

“What Subjects and Skills are Important for Software Developers?” Communications of the ACM, January 2007

the most important areas of study are data structures and algorithms (which received a 3.8 score out of a possible 4.0), procedural programming (3.8), software engineering design (3.7), software engineering implementation (3.7), and object-oriented programming (3.6). Among the lowest ranked areas by software developers were physics (1.6), artificial intelligence and knowledge engineering (1.6), computer graphics (1.9) and mathematics for continuous systems (2.0).
http://www.acm.org/careernews/extras/subjects.pdf 

“Seven Strategies for Attracting and Retaining Top IT Talent” CIO.com, January 4

IT departments must start now in developing the type of strategy that will enable their companies to deal with what some economists are calling the most intensive war for talent in the history of American business. Corporations need to place a premium on recruiting top talent, challenge their employees with important initiatives, provide them with abundant opportunities, applaud them for their hard work and extra effort, and create an exciting work environment. … This process starts with the interview process, where organizations should focus on selling themselves to top candidates. Once these candidates are hired, you then need to offer challenging work that matters. … Not only must the work be challenging, it must open up new career opportunities. One of the surest ways of attracting and retaining top talent is offering workers an abundance of ways for furthering their careers. … Employees will not remain with a company if they do not feel that their work is appreciated.
http://www.cio.com/career/boost/column.html?ID=27988&source=nlt_ciocareers 

“How to Get Found” Computerworld, January 15

In order to stand out during the job search, you can embrace a wide range of Web-based tactics that will help to make you highly visible to recruiters. … establish a profile on a social networking site such as Linked In or Ryze. … think about making your resume easier to find online. One tactic is to optimize your resume for search engines by including a keyword section on it where you can list relevant terms such as the industries you have worked in and the technologies you are able to apply.
http://www.computerworld.com/action/article.do?command=viewArticleBasic&articleId=277439&source=NLT_CAR&nlid=5 

“Ex-PARC Chief Urges Shift in Engineering Schools” ITWorld.com, December 1

Brown points out, schools must teach aspiring engineers how to become lifelong students instead of teaching them specific skills or training them for a specific career path.
http://www.itworld.com/Career/3710/061201schoolshift/pfindex.html 

“For IIT Graduates Today, Home is Where the Money Is” The Times of India, January 5

The best and the brightest now prefer to stay home in India, where the rapid pace of economic growth has closed the gap with the West in terms of salary, prestige and career opportunities.
http://timesofindia.indiatimes.com/For_IITians_today_home_is_where_the_moolah_is/articleshow/1054987.cms 

Original source: http://www.acm.org/careernews/issues/v2_i24.html

Author: Adam Kahtava Categories: Career News 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: