PDA

View Full Version : Layout engine in browsers



letom
03-17-2013, 07:33 PM
Can anyone explain the function of Layout Engine in Browsers ?Gecko, Trident etc etc

Beverleyh
03-17-2013, 07:56 PM
Im not really sure what you're asking (or why you're asking it). As far as I know, a layout engine is what powers and displays markup in a web browser. A quick Google search shows that Trident is the engine that runs in IE browsers and Gecko is the engine that runs in Firefox.

For a more detailed explanation, you should probably do some research via Google.

letom
03-18-2013, 06:59 PM
@Beverleyh

I need to find a solution for the vulnerable issue in the cyber world for developers that is browser incompatibility of web pages. if iam developing a circle using moz-radius, (using CSS3) these Tera billion browsers will not allow me to give a true output to my users. One stone age browser will display it as a square and other modern browsers will display it as a circle. Exactly this stone age browsers is a the great vulnerability breaks all WEB standards, displaying layers in its own way they like.


In other case, we are thinking to develop a fully functioned java script website. There arise this same problem.
I want to lock it out my website accessing from stone age browsers that's the point

jscheuer1
03-18-2013, 07:19 PM
The way to deal with these issues is to set things up so that they can either degrade gracefully and/or have a fall back.

To start with, keep things as simple s possible. Add css 3 effects in unobtrusive ways. In ways that, if a browser doesn't support it, it will be OK, maybe not as pretty, but still OK. The other alternative is that for non css 3 browsers, use small images or sprites to make up for missing css 3 capabilities.

Same idea with javascript. Just make sure your content is still accessible without it. Maybe it won't be as exciting to interact with, but at least people can still get the essential information.

letom
03-18-2013, 07:38 PM
@John

I don't know how much effective this......
Can we develop a nested browser using this LE to display the css3, HTML5 components in our webpage. appear in the user's browser when he/she surfs our webpage with out informing or seeing them ?( hope you understand what iam explaining ?)

traq
03-18-2013, 09:42 PM
Short Answer: no.

Long answer: you can't choose what browser your visitors use, or force them to upgrade.

There are options, like chrome frame (https://developers.google.com/chrome/chrome-frame/) - but again, you can't make your users install it (also, simply installing chrome would be a better solution anyway).

Things like the various HTML5 elements can be supported in older IE browsers by using the html5shiv (http://code.google.com/p/html5shiv/) script.

And [I'm *not* recommending it, but] there's always flash.

In the end, "graceful degradation" (making sure your site is still usable without the fancy stuff, as John describes) is the best way to go. You can use javascript to determine if specific features you use are supported (modernizer (http://modernizr.com/) is a good example of this) so you can avoid loading certain features that you know won't work, possibly advising the user of why the feature is not available to them also.

If you want anything more specific, please let us know specifically what you're trying to do.

letom
03-19-2013, 05:21 AM
@Adrian

Thanks for your message and valuable advices .
FYI I accept your valuable advices according to today's engineering.
Now a days major air crafts can control with a software, then why we can't do these nested stuff, Subject of aircraft is a different scenario,
But i mean we can do the nested browser(inner browser) facility by calling libs of these LE in our application, will some times get a solution for that. But i think about the issue, including these files in our apps increase the downloading time and reduces the fast surfing of website.

I understood the matters and consequences what John and You said. But again iam asking i want to display a circle in webpage (not graphics) and which is to be support in the stone age media. is there any possibility to do that ? If not

Look in today's world most people are using touch panel devices. then why we want to avoid fully java script functional websites. without JavaScript touch panel will not become user friendly.
We can capture the type of browser, ip address and more from the client if it is like that then why can't we write a script to avoid accessing from these stone age browser ?
&copy Record it this is my IDEA :)

traq
03-19-2013, 06:10 AM
well, in terms of your example, there's no real "vulnerability" or "broken standard."

old browsers show a square instead of a circle - well, fine. CSS says that if the rendering engine doesn't understand a particular rule, it should just be ignored. Just because something is a standard doesn't mean it is *required* to be supported.

Honestly, I don't think it even breaks functionality. So it's a square and not the pretty circle you wanted - unless it was part of a "find the circle" quiz, nothing is really broken. If it is critical, then you should design a fallback (as John suggested, perhaps an image; as I offered, perhaps say "oh no, your browser doesn't make circles!")

As for javascript-dependent websites, no, there's no reason you can't make them. Just be aware that there are people/ browsers/ situations where javascript is simply not available (and/or not the version you expect), so cross-browser testing, fallbacks, and feature detection/ aborting become more important. A lot of javascript-dependent websites load their entire app via javascript - that way, they know for sure that what they need is available and works before they start, so there's never a "broken" experience.

Try navigating Twitter with javascript on vs. off, for example. It's quite different, but everything still "works" - that's what you should strive for.

As far as literally *blocking* older browsers from your site, yes, you could do that. I don't think it's a good idea, even if you don't plan to support said browsers at all. Too much effort for too little benefit. Plus, if you're worried about being user-friendly, how friendly do you think flat-out *blocking* users is?


...this has sure taken a few turns from your original question :)

letom
03-19-2013, 06:44 AM
As far as literally *blocking* older browsers from your site, yes, you could do that. I don't think it's a good idea, even if you don't plan to support said browsers at all. Too much effort for too little benefit. Plus, if you're worried about being user-friendly, how friendly do you think flat-out *blocking* users is?

Thanks

That why "God will make a way where there seems to be no way" :)
Mozilla, G-Chrome, SeaMonkey all are free browsers works under minimum hardware configuration. I don't think some one who is using OS like Windows 95 or 98 in now a days, if they are using that in now a days that is for research purpose or may for some other purpose. If they are using these os for professional use,some times hackers will dig the skeleton of their system architecture and now it may be available in Microsoft's labs only ...

first check operating system then accept the browsers IE 7+, Mozilla Projects(Gecko LE), G-chrome, Safari., opera only, if they are not downloading the mozilla or g-chrome for free. they are not the ethical users of internet, they want to see the broken links in website not to use the functions and facilities in website. So we want to forbid these users surfing internet form stone age browsers. How is it ?

jscheuer1
03-19-2013, 07:44 AM
Some people cannot afford anything better and/or don't know how to upgrade hardware and/or software and/or have a disability that prevents them from using javascript and/or css and/or images.

Your site should be accessible to a text only browser like Lynx. Anything you put on top of that is fine, as long as it doesn't compromise accessibility.

That said, the number and kinds of people you will be leaving behind if the accessibility of your site depends upon any of those things is minimal. Just decide if that's OK with you or not. There really is no reason to block anything though. Folks with different setups than your site supports can decide for themselves whether or not they want to visit your site. Even if your site doesn't natively support a given browser/OS, etc., users of those systems can perhaps find a way to get what information they desire from it, so should be allowed to try.

After all, that's what the internet is for - sharing information - for educational, personal, and/or commercial reasons.

letom
03-19-2013, 07:58 AM
@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
03-19-2013, 08:13 AM
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
03-19-2013, 11:30 AM
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
03-19-2013, 12:59 PM
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
03-19-2013, 01:45 PM
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
03-20-2013, 07:06 PM
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
03-20-2013, 07:54 PM
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
03-20-2013, 08:09 PM
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
03-21-2013, 02:59 AM
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/side/print/printcontent3.htm

letom
03-21-2013, 05:03 AM
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..