Certainly, Internet Explorer contains a large number of errors in different versions, but with the help conditional comments they can be dealt with by seeking their elimination. But what nothing can fix is that IE is hopelessly outdated. While other browsers include more and more CSS3 properties and support various newfangled technologies, IE is marking time. The release of IE9 will not solve the problem; previous versions will not disappear overnight. In such a situation the best solution there will be graceful degradation - the principle of maintaining performance when some functionality is lost.
Let's break this down into a small example, which displays text in a block and a button. The block and button have rounded corners, and a small shadow is also added to the block. So far, browsers for CSS3 mainly use specific properties with their own prefixes:
- Firefox - properties starting with -moz-;
- Safari and Chrome - properties starting with -webkit-;
- Opera - properties starting with -o-.
Different versions of these browsers can understand some properties both with and without a prefix, so for universality they add several properties at once. So, to create rounded corners we need the following style.
Moz-border-radius: 10px; /* For Firefox */ -webkit-border-radius: 10px; /* For Safari and Chrome */ border-radius: 10px; /* For Opera and IE9 */
Although the use of these properties will lead to invalid CSS code, in this case it is more important to work in Firefox browsers 1.0, Safari 3.1, Chrome 2.0, Opera 10.50, IE9, as well as their older versions. Example 1 shows how to use CSS3 properties to create shadows and rounded corners.
Example 1. Block with shadow
XHTML 1.0 CSS 2.1 CSS3 IE 8 IE 9+ Cr Op Sa Fx
You need to go through 20 questions that are randomly selected from the database. To pass the test, it is enough to correctly answer at least 75% of the proposed questions (15 or more questions).
The result of the example is shown in Fig. 1.
Rice. 1. Block view in Safari
The same example in the IE8 browser and below is shown in Fig. 2.
Rice. 2. Block view in IE8
Although the appearance of the elements differs in detail, the functionality of the page as a whole remains the same. The button can be clicked, the text remains the same, including its color and background, and there are no display errors. In fact, the difference is only in the little things that perform decorative rather than practical functions. All principles of graceful degradation are fulfilled.
What does this approach give in practice?
- Allows you to actively use decorative properties of CSS3 without regard to the browser.
- Motivates to use various CSS3 effects.
- It makes the developer’s life significantly easier, since he no longer has to look for solutions for outdated browsers.
- Speeds up work productivity.
Of course, graceful degradation is not always applicable. If the layout requirements indicate support for older versions, then you will have to look for alternative solutions, for example, use images for rounded corners. But for the most part, requirements for layout are set without taking into account the general situation. And if we compare all the advantages of graceful degradation with the disadvantage, which manifests itself only in the fact that outdated browsers, in particular, IE8 does not display the page “beautifully” enough, then sympathies will be on the side of progress.
From the author: The -webkit- prefix is so common in CSS today that some sites refuse to work correctly without it. While for developers, vendor css prefixes for the last couple of years have meant a direct sign not quite perfect job properties, this led Mozilla to take a desperate but necessary step. In Firefox 46 or 47 (released in April or May 2016), Mozilla plans to introduce support for a series of non-standard –webkit- prefixes to improve browser compatibility with that prefix (even on mobile devices).
The idea is not new Microsoft Edge also supports various -webkit- prefixes for compatibility. Opera began supporting -webkit- prefixes in 2012, and then switched to the Webkit Blink engine. W3C and browser developers did not plan to use this prefix in website development:
“Official W3C policy states that experimental properties should not be used in site code. However, people use them because they want their sites to use the latest technology and look cool."— W3C page on optimizing content for different browsers
However, developers always want to access the latest features as quickly as possible. Vendor prefixes turned everything upside down and gave Webkit dominance, but I believe prefixes had a huge impact on the rapid development of the Internet.
Mozilla and Microsoft's methods will only harm most sites. Most sites will already have –moz- prefixes connected, or it will turn out that with the new one Mozilla update will support new properties without the need to make changes. However, as professional web developers, we need to put this to rest and understand that some designs may produce mixed results. You may already know which of your projects will be destroyed by this update. Web developers, it's time to rethink your approach to vendor prefixes and testing them on sites.
New prefixes
Mozilla is going to include a number of –webkit- prefixes. From what I've gathered, it appears that Mozilla has no intention of matching its list with Edge properties. Not all properties need to be compatible with the Mozilla engine. Among the prefixes that Mozilla is going to add, judging by the Compatibility/Mobile/Non Standard Compatibility wiki page, are the following:
Webkit - for gradients
Webkit-transforms
Webkit-transitions
Webkit-appearance
Webkit-background-clip
Webkit-device-pixel-ratio
Webkit-animation
Some other properties may be in @-webkit-keyframes.
Cross-browser testing will be critical
If you, a web developer, did not include the -moz- prefix so as not to test new CSS properties in Firefox, and the deadline is approaching, and the client forces you to add this prefix, then you will have to retest the site in Firefox 46 or 47. These versions will be released in April or May, so you still have some time.
To test your website without waiting for Firefox 46/47, you can enable these changes in Firefox Nightly by setting layout.css.prefixes.webkit in about:config. If you have the latest version of Nightly installed, the default should be true. Not all of the -webkit- prefix changes work in Firefox Nightly yet, but it's still a good place to test what your site will soon look like. I would wait until March before seriously testing the site in Firefox Nightly.
Much more importantly, Microsoft Edge already interprets and displays -webkit- prefixes in a similar way. This means that any WebKit styles on your site are already displayed in a browser that was completely unexpected. If you have not yet worked with this browser, then install Windows 10 and get access to it to test sites.
Vendor prefixes are gradually disappearing
Fortunately, vendor prefixes are gradually disappearing as development teams find new solutions. The Chrome/Blink team changed their approach a bit:
"Going forward, instead of enabling vendor prefixes by default, we will keep the regular properties behind the 'enable experimental web platform properties' flag in about:flags until those properties are enabled by default." — Team The Chrome/Blink
The Firefox team followed a similar path: “The main direction of work at Mozilla now is moving away from vendor prefixes, by disabling them or transferring them to the state of regular properties if they are already stable. This is at least our general policy; individual cases deserve exceptions. »— Boris from Mozilla
Microsoft Edge is also targeting the removal of prefix support: “Microsoft is also trying to get rid of vendor prefixes in Edge. This means that when using special HTML5 tags or CSS properties, developers will not have to add a special prefix for the Edge browser. Instead, developers will write standard code."— Mashable
Graceful degradation using prefixes no longer works
Moving away from vendor prefixes means only one thing – the technique of graceful degradation through prefixes is no longer an option. Isolating specific browsers through vendor prefixes (for example, for Chrome) was not the purpose of these prefixes; Developers have always been encouraged to use all prefixes (–webkit- to –o-). If you are using any functionality that works on properties with vendor prefixes, and have also used the graceful degradation technique in your design for other browsers, then this no longer works.
Conclusion
Times are changing. WebKit's dominance was unintentional and caused commotion and incompatibility on the Internet. Other browsers are looking to extend compatibility by adding –webkit- prefixes. Gradually, with the disappearance of vendor prefixes, the this problem. Developers should check whether the use of prefixes does not cause undesirable consequences in non-WebKit browsers.
I'm confused about what the difference is between Gradual Increase And Graceful Degradations. They seem one and the same to me.
could you explain to me the differences between them and in what situation would I use one over the other?
8 56 2010-03-31 08:05:388 answers:
They are almost exactly the same, but they are different in context.
There is a class of browsers called "A Grade Browsers". These are your typical audience members who (probably) make up the majority of your visitors. You'll start with a base level of these users. Let's call it best modern practices.
If you want increase experience for those who casually use FF3. 6 or Safari 4 or some other developer whizbang nightly webkit whathaveyou you want to do amazing things like
- rounded corners via css
- shaded text (but please God, not too much)
- cast shadow (see above in parentheses)
They make your site look awesome, but they won't break it. This gradual increase. Embracing the future from a perspective best practices.
on the other hand, your niche Nintendo site attracts a fair number of IE5 users. Poor you, but you also want to make sure they keep coming back. You can provide an alternative to your ajax behavior by including an ajax script in external file, and if their JS is not included, it's possible your links are refreshing the entire page. So on. From the point of view best modern practices, you will see that some historical markets are served some semblance of a functional website. This graceful degradation.
They are basically identical, but differ in terms of priority for many development teams: PE is quite nice if you have the time, but GD is often necessary
If your site looks equally good in all browsers, but some browsers get, say, dancing ponies because they support dancing ponies, then that's progressive enhancement. It works in all browsers, but some browsers get something extra. Typically the term is applied to certain Javascript features that can enhance usability beyond "raw HTML".
If your site only looks the way you're going to on browsers that fully support, say, CSS3 and IE8 - the same page will display without, say, rounded corners, then this is graceful degradation. The site is indeed designed for modern browsers, but it is still usable in older browsers, just not as fancy.
after all, they are really the same thing, viewed from both sides different points vision.
direction from the selected one base The concepts are different for everyone.
graceful degradation begins at the ideal user experience level and decreases based on user agent capabilities to a minimum level, serving agents that do not support certain features used by the baseline.
Progressive enhancement starts at the consumer's broad minimum experience and increases based on the consumer agent's capabilities to a more capable level, catering for agents who support more advanced functions than the baseline.
I think both concepts could be used if time/budget allows. If not, then graceful degradation would be preferable.
Sorry to resurrect something that's been over a year, but I felt like I could contribute, in some way, my own opinion on the matter.
While I agree with Alex Mcp and deceze in some ways, the terms "graceful degradation" and "progressive enhancement" have slightly different meanings than what I stand for.
graceful degradations A lot of the time (in my opinion) it seems to be more of a stick to beat an application into submission after it was built poorly in the first place in my experience. Like someone builds some huge javascript object that provides the user with something really cool to play with, until a manager shows up, checks on the thing, and everyone is screaming, throwing their hands up when it comes to their attention, that their application does not work in 35% of browsers. Someone better provide a fallback for this."
Gradual Increase although (and this is such a good term to say too) it would seem to be more about creating something that just works, at a basic level, everywhere, using the most basic techniques available, to provide all the functionality the user needs. This can then be added on with neat little unobtrusive helpers, styling, etc. this actually improves the user experience of the app in question rather than just making it barely usable. "which looks cool. Does it work in IE6. Oh yes. It really does"
I think that perhaps giving style as an example of both terms in the top two answers here kind of misses the real underlying usability issue, which is gradual increase often decides by nature where graceful degradations ignores until everything goes wrong.
Rant over...
graceful degradation is the practice of designing your web functionality so that it provides a certain level of user experience in a more modern browsers, but it will also gracefully degrade to a lower user level in older browsers. This bottom level isn't as great to use for your site visitors, but it still provides them with the core functionality they came to your site to use; things don't break for them.
progressive enhancement is similar, but it does the opposite. You start by establishing a base level of user experience that all browsers will be able to provide when rendering your website, but you also create more advanced features that will automatically be available to browsers that can use it.
in other words, graceful degradation starts with status quo complexity and tries to fix for less experience, whereas progressive improvement starts with a very simple, working example and allows for constant expansion for future environments. Degrading gracefully means looking back, while rising progressively means looking forward while keeping your feet on solid ground.
Graceful Degradations
graceful degradations the ability of a computer, machine, electronic system, or network to maintain limited functionality even when much of it has been destroyed or rendered inoperable. The goal, of course, is to prevent catastrophic failure.
graceful degradation is one solution. It is the practice of creating a website or application so that it provides a good level of user experience in modern browsers. However, it degrades gracefully on older browsers. The system may not be as nice or beautiful, but the basic functionality will work on older systems.
A simple example is using 24-bit Alpha transparent PNGs. These images can be displayed on modern browsers without problems. IE5. 5 and IE6 would show the image, but Transparency Effects would fail (this can be made to work if needed). Older browsers that do not support PNG will show alt text or white space.
developers who accept graceful degradation often specify their level of browser support, such as Tier 1 browsers (better experience) and Tier 2 browsers (degraded experience).
Gradual Increase
gradual increase is a web design strategy that emphasizes accessibility, semantic HTML markup and external style sheet and scripting technologies. Progressive enhancement uses web technology in a multi-layered form that allows everyone to access the core content and functionality of a web page using any browser or internet connection, while also providing an enhanced version of the page to those with more advanced software browser or higher bandwidth.
progressive increase like schematic diagram to graceful deterioration but in the opposite direction. The website or application will establish a baseline user experience for most browsers. More advanced features will be added when the browser supports it.
Progressive enhancement doesn't require us to select supported browsers or revert to tabular layouts. We choose the technology level, i.e. the browser must support HTML 4.01 and standard page requests/responses.
to make it easier, just set the bar right at the top, then you can ignore the progressive enhancement. When new feature coming out to raise the bar ;)
or alternatively set your bar to the lowest level (possibly trot?) and just use a progressive rise.
In this article, we will try to understand the difference between two principles of creating a page based on responsive web design: Progressive Enhancement and Graceful Degradation.
Graceful degradation
Graceful degradation, or “failure tolerance,” is a broader concept that applies not only to web design. In a general sense, it implies the ability of a system to operate even if some of its components fail. And the more serious the failure, the lower the quality of the system or work with the system, but at the same time the main functionality of the system remains operational.
Graceful degradation can be expressed in the ability to work with JavaScript disabled, in the accurate display of the site in a browser without support for the CSS3 specification, in the adequate display of the site with disabled images. All these failures should not affect the operation of the web application. However, if everything works, then it is much more convenient for the user to use the site.
If we consider concrete example, for example, in the field of web interface design, this principle can be formulated as “the system can work with JavaScript completely disabled, but with JavaScript enabled it will be much more convenient to work with.” The question is not whether there could be a situation where JS is disabled or not functioning completely, or why this happens. This situation is taken as a given. The designer must develop an interface that will continue to work, albeit with JS disabled.
Often, to follow this principle, you have to redo the server-side form processing logic. However, this approach will pay off if you think about fault tolerance at the form planning stage.
Compliance with the principle of graceful degradation allows users (and every user is a potential client) to be able to work with the site in any situation.
Progressive Enhancement
Progressive enhancement is a principle that, together with mobile first, creates the theoretical basis for responsive web design. Its name already says that it positions the creation of a web page in stages, cyclically, according to the principle “from simple to complex.” At each of the pre-planned stages, the appearance of the page should become more beautiful, better and more convenient, but all functionality should be available initially.
Is a more special case of graceful degradation , since all web pages built on it will fully comply with the principle of graceful degradation.
Typically, creating a page using the progressive enhancement principle consists of the following steps:
- Creating a page on a “clean” basisHTML
At this stage, a fully functional page is created, which consists of only HTML code, which is semantically and logically correct, and therefore can be interpreted by any browser, even the simplest one. At this stage, no formatting is performed and the browser itself formats the page according to the standards that are included in it. Progressive improvement insists that the first stage is the most important, since there is nothing more valuable on the web than content.
Short: creating a semantic and logical document structure - Adding RulesCSS
At this stage, a CSS table of the old format is used: a markup grid is added, elements are positioned, background images are applied to blocks, styles, colors and text styles are changed. In general, the page gets a new stylized look, becoming more beautiful and pleasant.
Short: giving the appearance of a document - Applying CSS3
Now you can apply all the effects and enhancements provided by the CSS3 specification to the document. That is, add translucency, shadows, rounded corners for blocks, smooth animated transitions for pseudo-classes or form elements.
Short: giving perfection appearance document - Creating scripts onJavaScript
At this stage, all the effects and principles of interaction of the web page with the user are created. using JavaScript. These include AJAX requests, dynamic loading or data validation, animation effects and widgets (for example, Prototype or jQuery). In general, we make the page more user-friendly.
Short: interaction, interactivity, convenience
Let's try to apply this approach in practice. We will develop and design a simple site login form. At the first stage, we will create a login form in pure HTML. The shape isn't that pretty, but it's fully functional. Below is the page code and the result displayed in the browser:
Now in the second step we will give the form a style by applying to it a style sheet containing only those rules that are applicable to CSS without special properties. Let's add a background color, padding, alignment. Now the form looks better:
Now let's add the rules from the CSS3 specification. Let's add corners to the blocks, shadows for text input fields, style the button, and use new selectors to remove the unnecessary padding at the top. We get an improved form:
At the last stage, we can create an AJAX request so that the user can access the site without having to reload the page.
In this case, at each specific stage (if it is supported by the browser), a fully functional page will be displayed. But if the browser supports more advanced technologies, then the page only gets better.
Which principle should you follow?
If the site is built as efficiently as possible according to the concept of graceful degradation, then the result will be approximately the same as what would happen if progressive enhancement were used. So what's the difference then?
The fact is that building a website based on the principle of graceful degradation is quite difficult, since few developers can do it efficiently. In the simplest case of graceful degradation, you can do the following: create a website for the latest version browser and then show users a message telling them they need to download new version browser. At the same time, developers may not care how the site looks in older browsers. Another example of bad graceful degradation is complete shutdown site functionality when JavaScript is disabled. A striking example is sending messages on Facebook.com.
Therefore, progressive enhancement arose in response to poor-quality graceful degradation. Designing such interfaces has become easier and of better quality, since there are clearly defined stages for creating an interface.
IN adaptive design there is the concept of “mobile first”, which in some way corresponds to the concept of progressive enhancement, as it calls for action from simple to complex, from mobile screens to desktop PCs. That is why the key to the correct application of responsive web design depends on the developer’s ability to apply the principles of progressive enhancement and mobile first.
