Layout engine in browsers

[letom]

@John
Thanks for your message. Your expert arguments constrained me to do the things as per your suggestions.
I think you are a JavaScript expert .. can u apply my above logic of "nested browsing or lib calling" into the real world entity or a program. Iam checking it from my end..
According to your expert view. What you say about the result of it ? The result is Exceptional, Degradable, Success OR Null ?

@Adrian Refer it

[jscheuer1]

Well, any javascript can be made to degrade gracefully, as well as be made to perform as well as possible under a variety of browsers.

I would recommend using jQuery. For most things that will automatically give you compatibility with most browsers used today. In addition, make whatever your script does be non-essential. Like with an interactive javascript menu, have all of the links right there on the page in a list of some type. For that you can use a <noscript> tag or simply set things up so that unless javascript is enabled, the menu is just ordinary links. Have javascript import or write the styles needed to make the menu require user interaction for - say drop downs, etc.

Or for a slideshow, have all of the images on the page, use javascript to turn them into a slideshow.

These are just general guidelines. For a specific situation, I could be more specific. Also be aware that many of the scripts here on Dynamic Drive do not degrade all that well, but most if not all can be made to do so.

[letom]

John

Thanks for your message.
Keeping two versions of website. one is without javascript and css3 and other is with javascript and css3 is a best solutions may be ?

[Beverleyh]

That's probably not necessary.

The best solution would be to just make one site that;

- retains functionality and accessibility even when javascript turned off
- looks good dispite the extra fancy CSS3 effects

The javascript and CSS3 are just extra layers that come into play for those browsers that support it, but the same site should still "work" without javascript, and look good with CSS2.

One site means less work in the long run - less errors, no duplication, lower storage too.

[traq]

Agreed - again, though, if you decide that a certain browser is not worth supporting - either because you have very little traffic from it, or because it doesn't support things you rely on - that's *fine*. Personally, I would want the site to be as functional "as possible" for them and not look terrible; and I think the trouble of actually blocking access is just silly.

In terms of your "browser within a browser" idea, that's kinda what the chrome frame is. Also, most modern HTML5 features have a javascript substitute as well (deciding when to load such scripts is one of modernizer's primary uses).

[letom]

Thanks Adrian
My first idea .. Forbidding the access from certain browsers is a foolish idea, because the browsers i provide the access to my site have the facility to disable javascript.(Almost all browsers have this facility) so if they disable the javascript and view our website, we can't predict what output they are getting. So as John suggested keeping important things available without JavaScript is best idea (graceful degradation) i mean and using noscripts . Otherwise we need to adopt the technique nested browser... Always thinking for finding a solution with the details you provided.

Are you agreeing with my idea" Keeping two versions of website. one is without javascript and css3 and other is with javascript and css3 is a best solutions may be ?" same thing is adopted by GMAIL i mean ? Standard and HTML edition

[traq]

Are you agreeing with my idea" Keeping two versions of website. one is without javascript and css3 and other is with javascript and css3 is a best solutions may be ?"

not exactly. maintaining separate websites (js vs. no-js; full vs. mobile; etc.) is usually more trouble than it's worth. Graceful degradation, along with some indicators/ notices about features that are "unavailable" because of browser support, is usually a better way to go. But every situation is different - it's up to you.

[djr33]

Do you have a smartphone? Have you ever visited a website that just don't work? Isn't that annoying?

The logic here is very simple: maintain a website that is reasonably compatible with modern browsers and may contain special features that don't always work for rarer browsers. But then don't do anything that makes it completely inaccessible if someone doesn't use those browsers. It doesn't need to look great or do absolutely everything well, but it needs to be more or less accessible to everyone. I know that when I'm using a mobile device some websites won't work properly; but I expect them to be functional so that I can get the information I need-- maybe I want to look up a phone number to make a call.

There are LOTS of ways to access websites-- mobile devices and search engine spiders are two examples-- do you want to make Google unable to read all of your content? I'd think not. But it doesn't need the fancy JS-based features.

It's all about a common sense balance between enhanced features and making a reasonable fallback when those don't work.

[jscheuer1]

As an example of gracefully degrading, here's a script I'm playing around with now:

<!DOCTYPE html>
<html>
<head>
<title>Selective Print Demo</title>
<!-- Begin Selective Print Styles -->
<style type="text/css">
#printarea {display: none;}
</style>
<style type="text/css" title="copyprint" media="print">
#screencontent {display: none;}
#printarea {display: block;}
</style>
<noscript>
<style type="text/css" media="print">
#screencontent {display: block;}
#printarea {display: none;}
</style>
<style type="text/css">
.print {display: none;}
</style>
</noscript>
<!-- End Selective Print Styles -->
<script type="text/javascript">
// Selective Print Script (c)2013 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
(function(){
	var sheets = document.getElementsByTagName('style'), i = sheets.length, printsheet;
	while(--i > -1){
		if (sheets[i].title === 'copyprint'){
			printsheet = sheets[i];
			printsheet.disabled = true;
		}
	}

	function copyPrint(element){ //function used to copy print the innerHTML of the passed in element
		var savedtitle = document.title;
		element = element.tagName? element : document.getElementById(element);
		document.getElementById('printarea').innerHTML = element.innerHTML;
		document.title = element.getAttribute('data-print-title') || savedtitle;
		printsheet.disabled = false;
		window.print();
		document.getElementById('printarea').innerHTML = '';
		document.title = savedtitle;
		printsheet.disabled = true;
	}

	function printbuttons(e){
		e = e || event;
		var t = e.target || e.srcElement;
		if(t.type === 'button' && t.value === 'Print'){
			copyPrint(t.getAttribute('data-printid'));
		}
	}

	if (document.addEventListener){
		document.addEventListener('click', printbuttons, false);
	}
	else if (document.attachEvent){
		document.attachEvent('onclick', printbuttons);
	}
})();
</script>
</head>

<body>
<div id="printarea"></div>
<div id="screencontent">
<input class="print" type="button" value="Print" data-printid="print" />
<div id="print" data-print-title="List One">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>

<input class="print" type="button" value="Print" data-printid="print1" />
<div id="print1" data-print-title="List Two">
<ul>
<li>11</li>
<li>11</li>
<li>11</li>
</ul>
</div></div>
</body>
</html>

It allows you to selectively print one or the other of the two lists. If javascript is unavailable, the print buttons are not seen and the entire page may be printed normally. Even with javascript, if the user chooses to print the entire page in the normal way, the entire page may be printed. At least that's the idea. Demo:

http://home.comcast.net/~jscheuer1/s...ntcontent3.htm

[letom]

Thanks John and Adrian

John .. Your code exactly gives me some idea about how to do graceful degradation in good manner. From this point it is more helpful me to develop advanced applications in JavaScript work under different scenarios.

Once again very thanks for the advices from both of you John & Adrian..