Introduction

This article is a wild collection of ideas around browser and web standards. It is most likely naive and erroneus and there is a fair chance that I overlook existing facts which are already discussed by other people.
But hopefully it provides some new ideas as well and is an inspiration for other people.

I have been reasoning about the problems of

1. CSS compatibility
2. Privacy and security impact of social networks and modern web technologies
3. How software developers could be motivated to build a more secure web following well established standards
4. How users could be motivated to use and to ask for a more secure web
5. How we can switch the web into secure mode without breaking backwards compatibility

CSS compatibility

A Cascading Style Sheet (CSS) describes the look and feel of a web page. Some browsers do support only older version of CSS, some browser versions support CSS incorrectly, some browser supports only some features
of a newer CSS version but not all. In addition browsers add non standard features as innovation happens to be faster than updating standards.

All of these facts transforms building websites into a complex task, which requires a lot of browser specific knowledge and limits the use of new CSS features. The worst of all,
there is no stable and clean way to determine the support of CSS across all browsers. As a consequence adaption of new CSS standards is very slow.

Long term considerations

Today so called ‘browser hacks’ allows to define browser specific CSS rules inside of a single file.

If we assume that it is the year 2040. We have HTML version 1 to 15 and CSS version 1 to 22. In addition to the current browsers like Firefox, Internet Explorer, Google Chrome, Safari and Opera, there might be new browsers vendors for special devices.

Do you think that it is possible to write browser specific CSS for the unique combination of CSS version, browser vendors and version using browser hacks? Even today most web developers can not explain by heart all differences of CSS support in the current 5 most popular browsers.

On the long term the only option is to follow standards and to be able to define CSS specific to a standard level. In addition to be able to cope with upcoming versions of CSS there needs to be a way to prevent browsers from
interpreting CSS which they do not understand. This is the reason why we need ‘if conditions’ in the CSS.

Here is an example of an CSS, if if-conditions existed:

if (css.version < 3){
 #main{
	-foo-style: someValue;
 }
}
else if (css.version >= 3	&& css.version < 5){
	-bar-style: someValue;
 #main{
	-foo-style: someValue;
 }	
}	
else if (css.version >= 5) {
 #main{
	-foo-style: someValue;
	-bazz-style: someValue;
 }
}

Conditions based on standard support is a good thing but we don’t live in a perfect world. There will always be browser specific errors. Therefor it is great to
be able to check for browser type and version as well. There had been already proposal to allow browser conditions in CSS and I think that in combination with conditions checking for the CSS version, it is a good thing.

Here is a CSS example checking for browser version.

if (browser.name = ‘FooBrowser’ && browser.version > 5){

 #main{

	-foo-style: someValue;

	-bazz-style: someValue;

 }

}

Why not specifying the css version in header?

Alternatively to if-conditions we could consider a CSS header like the DOCTYPE declaration in an HTML file.

Possible CSS header:

<!DOCTYPE CSS PUBLIC “-//W3C//DTD CSS 2.1//EN” “http://www.w3.org/TR/css3.dtd”>

An argument against this idea is that HTML elements have not changed much over time but CSS changed a lot in short time. If you wanted to support different browsers, you would need to
provide multiple CSS versions for the same document. In addition you are still not able to adapt a CSS for a specific browser. But this is required, if a browser does not support a CSS rule.

Is Microsofts approach of different modes required?

The X-UA-Compatible meta tag is a fix to problem of Microsoft browser. IE-6 was not standard complient. As Microsoft changed its strategy to follow standards, there was
a conflict of web pages which no longer rendered properly in IE-7 or IE-8. This problem is fixed with X-UA-Compatible as it allows web pages to be rendered in IE-8 as if it was a IE-6 browser.

But as already stated, adding the browser type and version as criteria to dermine how a CSS is rendered, increases the number of combinations for which you have to create and test your CSS and web pages. I don’t think that
this is a proper solution on the long term.

Degration of Privacy and Security

The CSS history leak is a well known security problem in browsers. As visited links can have a different style than non visited links, a website can easily determine which pages you have visited. Firefox decided to fix
this problem with an upcoming version. Apple fixed this problem for version 4.1 and 5 of the Safari browser but Microsoft, Opera and Google Chrome are still facing this security problem.

Why is this a security problem?

The answer is simple: The usage of internet has changed. People make use of social networks and publish their names and sometimes even private information on the web. If you can track the pages a users has visited on one of the large social
networking websites, you have a good chance to find out who the person is. Imagine you can find out who a visitor is, for which company he is working and in addition that he has been visiting web pages for people with drug problems.

My personal fear is that social hacking could evolve to one of the largest problem in the internet. While cracking and viruses destroy or steal information and possible money, social hacking could lead to blackmail and distruction of people.

Browser vendors should take the greatest effort to prevent such horror szenarios.

Reference

1. Firefox fix for CSS history problem
2. Safari fix for CSS history problem

Private browsing

Private browsing is a concept that opens a browser window or tabulator which is technically separated from all other windows. Once you close that window, all information like history, cookies etc are deleted. While the idea is good and already included in modern browsers,
the browser vendors took care to hide the information in menus and each browser established a different solution how the private browsing behaves and looks like.

Firefox 3.6 provides a menu item ‘Start private browser’ which hides the existing page and starts a blanc page in the same windows.
The private mode is indicated in the title bar of the browser. You can disable private browsing using the menu item ‘Stop Private Browsing’.
You cannot mix browser tabs in private and normal mode.

Microsoft Internet Explorer 8 has a new ‘Security’ menu. The menu item ‘In private browsing’ opens a new browser window. The status is indicated in the title bar of the menu and next to the address input field. You have to close it to delete private information. You cannot mix browser tabs in private and normal mode.

Google Chrome 5 provides a menu item ‘New incognito window’ and opens a new window. The mode is indicated by an image of person, which I would describe as
shadow of a spy in the top right of the browser. You need to close the window to stop private browsing.
You cannot mix browser tabs in private and normal mode.

Safari 4 provides a menu item in a different menu area to enable and disable private browsing. The current status is not indicated in the browser but you need to open the menu.
You cannot mix browser tabs in private and normal mode.

Opera 10.6 provides a menu item to open a new private window tabulator. The status is indicated with a tiny lock. You need to close the tab to delete the private information. You are allowed to have private and non private tabs in the same window.

The five major browsers have five different solutions. None of the browsers makes the option to toggle private browsing instantly viewable. The user must be aware of the possibility and need to find out which menu includes the command.

In my opinion, if we want to convince non technical people to be aware of and to use private browsing, there should be a common approach.

Here are some ideas:

• The most important: Not the private mode but the non private mode must be indicated to the user. Without knowing about private browsing and just by using his browser the user learns that there is something like private browsing.

• It is a good idea to have a single menu for security and privacy related items (IE-8)

• Opening a new browser window is an annoyance and not required. A new tab is much more comfortable (Opera)

• The private tabs should be marked clearly and exactly the same way across all browsers.

Could’nt the browser vendors speak at least about security related stuff?

Trigger the private mode from the website itself.

In addition, I think that private browsing could be triggered by the website as well. Imagine a bank or an internet shop can set a flag to trigger private browsing. Once you left the banking website or the paying area of the Internet shop the private information are deleted.

Getting rid of quirks mode

A browser can interpret a website in two modes: standard mode and quirks mode. Standard mode expects the web page to be properly written. The quirks mode of the browser tries to render the page somehow and interprets all trash.

Quirks mode is an extremely hacker friendly way, as it facilitates code injections. Internet users should be able to see if a website runs in standard mode (may be better called quality mode) or in quirks mode.

Motivating to build and to use a more secure web

There are billion of Internet users. How can we make them upgrade their browsers? There are billions of weg pages. How can we make them conforming to standards or even update to HTML 5? As a simple matter of fact,
we cannot change them on a single day and in fact there is no need to update all web pages but to fix broken pages.

What we could do is to provide a big motivation for people to update their browsers and for web site owners to update their sites.

I believe that the most important step is to make users aware of the quality of a website and if they are in a more secure mode or not. Imagine the following icons on the top of the browser:

HTML 5 page in private mode with SSL connection

The first icon indicates the HTML version. It is a cool modern HTML 5 website in strict mode. The second icon indicates if private browsing is enabled or not. In this sample it is activated.

The last item indicates if the connection is using SSL.

Here an example for a HTML 4 page in non strict mode (transitional) in non private mode but with SSL connection.

A second idea to make transitions more popular is to define a common date for a common release of all browsers. Imagine all browsers announce to fully support HTML 5 and CSS 3 by a given date.

Imagine the day of 11.11.11

Best Regards / Viele Grüße

Sebastian Hennebrueder