Step-by-step improvement with CSS3: Support for modern browsers. It's time to rethink CSS vendor prefixes Gradual css degradation techniques

I am confused about the difference between Gradual Increase and Graceful Degradation... It seems to me that they are the same thing.

could you please explain to me the difference between the two and in what situation would I use one over the other?

8 answers

They are much the same, but they differ in context.

there is a class of browsers called "class A browsers". These are your typical audience members who (probably) make up the majority of your visitors. You will start at the basic level of these users. Let's call it best modern practices.

If you want to to enlarge experience for anyone accidentally using FF3.6 or Safari 4 or some other whizbang nightly webkit developer whathaveyou you want to do amazing things like

• rounded corners via css
• shaded text (but please God, not too much)
• drop shadows (see above in parentheses)

This makes your site kick-ass looking, but won't break it. it gradual increase... Embracing the future in terms of best practics.

on the other hand, your niche Nintendo site attracts a fair amount 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 the ajax script in an external file and if their JS is not included then your links might be refreshing the whole page. Etc. From point of view best modern practices, you will make sure that some historical markets are served some semblance of a functional site... it graceful degradation.

They are mostly identical, but differ in terms of priority for many development teams: PE is pretty 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 this is a progressive improvement. It works in all browsers, but some browsers get something extra. Typically this term is applied to certain Javascript functions that can improve usability outside of "raw HTML".

If your site only looks the way you intend on browsers that fully support, say, CSS3 and IE8 - will render the same page without, say, rounded corners, then that's a graceful degradation. The site is really meant for modern browsers, but it's still used in older browsers, just not that fancy.

after all, they are really the same thing, seen from two different points of view.

direction from selected base for each concept is different.

graceful degradation starts at the ideal level of user experience and decreases depending on the capabilities of the user agent to a minimum, serving agents that do not support certain features used by the baseline.

progressive enhancement starts at the broad minimum experience of the consumer and increases, depending on the capabilities of the consumer's agent, to a more capable level, providing food for agents supporting more advanced functions than basic ones.

I think one could use both concepts if time / budget permits. If not, graceful degradation is preferred.

Sorry to resurrect something that is over a year old, but felt I could contribute, in some way, my own opinion on the matter.

although I agree with Alex Mcp and deceze in some ways, the terms graceful degradation and progressive improvement have a slightly different meaning than what I stand.

graceful degradations, a lot of time (in my opinion), it seems more of a stick to beat the application in the view after it was built poorly in the first place in my experience. How does someone build some kind of huge javascript object that provides the user with something really cool to play with until the manager comes in, checks the thing and everyone runs screaming, throwing their hands when it comes to their attention that their application is doesn't 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 more about making something that just works, at an entry level, everywhere, using the most basic methods available, to provide all the functionality the user wants. This can then be added with neat little unobtrusive helpers, styling, etc. it actually improves the user experience of the application in question, rather than just making it barely usable. "which looks cool. Does it work in IE6. Oh yes. It does."

I think maybe by giving style as an example of both terms in the top two answers here kind of misses the real core usability problem that gradual increase often decides by nature where graceful degradations ignores until things go wrong.

The tirade is over ...

graceful degradation is the practice of creating web functionality to provide a certain level of user experience in more modern browsers, but it will also gracefully degrade to a lower user level in older browsers. This bottom layer is not as enjoyable 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.

the progressive rise is similar, but the opposite is true. You start by establishing a baseline user experience that all browsers will be able to provide when rendering your website, but you also create more advanced functionality that will automatically be available to browsers that can use it.

in other words, graceful degradation starts with the status quo of complexity and tries to fix for less experience, whereas progressive improvement starts with a very basic, working example and allows for continual expansion for future environments. To humiliate gracefully means to look backward whereas to increase progressively means to look forward while keeping your feet on solid ground.

Graceful Degradation

graceful degradations the ability of a computer, machine, electronic system or network to maintain limited functionality even when most of it is destroyed or disabled. The goal of graceful degradation is to prevent catastrophic failure.

graceful degradation is one solution. It is the practice of building a website or application, so it provides a good level of user experience in modern browsers. However, this degrades gracefully on older browsers. The system may not be as nice or pretty, but the basic functionality will work on older systems.

a simple example is using 24-bit Alpha transparent PNGs. These images can be displayed in modern browsers without problems. IE5.5 and IE6 will show the image, but Transparency will not work (it can be made to work if needed). Older browsers that do not support PNG will show alt text or white space.

developers accepting graceful degradation often indicate their level of browser support, such as level 1 browsers (best experience) and level 2 browsers (degraded experience).

Gradual Increase

gradual increase is a web design strategy that emphasizes accessibility, semantic HTML markup and external stylesheets and scripting technologies. Progressive Enhancement uses web technologies in a layered mode that allows everyone to access the basic content and functionality of a web page using any browser or internet connection, and provide enhanced versions of the page to those with more advanced browser software or higher bandwidth.

progressive enhancement is similar to the concept of graceful deterioration but in reverse. The website or application will establish a baseline user experience for most browsers. More advanced functionality will be added when the browser supports it.

progressive improvement does not require us to select supported browsers or fall back to table-based layouts. We choose the technology level, ie the browser must support HTML 4.01 and standard page requests / responses.

back to our example image, we can decide that our application should work in all graphical browsers. We could use a lower quality GIF images by default, but replace them with 24-bit pngs when the browser supports them.

links

Wikipedia: Gradual Increase and

Table of contents:

The -webkit- prefix is \u200b\u200bso dominant in CSS that some sites do not function properly without it. This indicates that developers have not followed the best practices in recent years and this led to an unfortunate, but almost forced decision on the part of Mozilla. In Firefox version 46 or 47 (this is April or May 2016), Mozilla plans to implement support for the non-standard -webkit- prefixes to improve Firefox's compatibility with sites that heavily use -webkit (typically mobile sites).

However, developers use prefixes to take advantage of the latest browser capabilities as quickly as possible. The prefixes caused confusion with the dominance of WebKit, but they also pushed the web forward at an accelerated pace.

Mozilla and Microsoft's approach is safe for most sites. Many sites will use the -moz- prefix or will not need to do anything to be compatible with a future Firefox update. But as professional web developers, we must carefully consider and understand the implications of this. You know for sure which of your sites may be affected by this update.

So, it's time to rethink the approach to prefixes and test sites with them.

Supported prefixes

There are a number of -webkit- prefixes that Mozilla can implement. Based on the data I have gathered, Mozilla does not seek to match its list of supported prefix properties with the list of Edge properties, as not all of them are required for layout engine compatibility.

The Firefox developers are also close to a similar approach:

The current trend in Mozilla is to avoid vendor prefixes by disabling off-the-shelf properties and using a non-prefixed version if stable enough. This is a general policy: exceptions are possible in some cases - Boris from Mozilla

Microsoft Edge is also going to drop vendor prefixes:

“Microsoft is also looking to drop vendor prefixes in Edge. This means that developers looking to use the specific features of HTML and CSS will not use the specific prefix for Edge. Instead, they'll just write code according to standards. ”- Mashable

There will be no more gradual degradation based on prefixes

This move away from vendor prefixes means one thing - gradual degradation with vendor prefixes has no prospects.

The use of vendor prefixes to apply styles for a specific browser (for example, only for Chrome) was not the purpose of their introduction; the recommendation for developers has always been to use all prefixes (-webkit- to -o-). If you use features that depend on prefixed properties and use prefixes to gradually degrade your design in other browsers, then this no longer works.

Conclusion

Times change. The dominance of WebKit unwittingly led to incompatibility issues, forcing other browser vendors to implement the -webkit- prefixes. This issue will be exhausted as browser vendors move away from vendor prefixes, but for now, developers must make sure that prefixes don't cause unexpected results in non-WebKit browsers.

The web design industry is constantly changing, in part because web browsers and devices are constantly changing. Since the work that we do as web designers and developers is viewed through a web browser, our work will always have a symbiotic relationship with this software.

Changes to web browsers

One of the challenges that website designers and developers have always faced is not only changes in web browsers, but the range of different web browsers that will be used to access their websites. It would be great if all site visitors were using the latest and greatest software, but this has never been the case (and probably never will).

Some visitors to your sites will browse the web with very outdated browsers and missing features from more modern browsers. For example, older versions of the Microsoft Internet Explorer browser have long been a problem for many web professionals. Even though the company has dropped support for some of its oldest browsers, there are still people who will use them - people that you might want to deal with and communicate with.

The definition of "graceful degradation"

The reality is that people who use these outdated web browsers often don’t even know that they have outdated software or that their internet experience could be compromised due to their choice of software. For them, this outdated browser is simply what they've been using to access websites for a long time. From a web developer perspective, we want to make sure we can provide these customers with a rewarding experience, as well as create websites that work great in the more modern, feature rich browsers and devices available today.

"Graceful degradation" is a strategy for handling web page designs for different browsers, both old and new.

Starting with modern browsers

A website design built for a gradual degradation is developed primarily with modern browsers in mind. This site is designed to take advantage of the capabilities of these modern web browsers, many of which are “automatically updated” to ensure that people always use the latest version. However, websites that degrade gracefully also work efficiently for older browsers. When these older, less functional browsers view the site, it should degrade while it is still functional, but possibly with fewer features or other visual display elements. While this concept of providing a less functional or not very attractive site may seem strange to you, the truth is that people won't even know they are missing. They will not compare the site they see with the "best version", so as long as the site works for what they want and does not appear to be functionally or visually broken, you will be in good shape.

Progressive improvement

The concept of gradual degradation is a lot like another web design concept that you may have heard of - progressive improvement. The main difference between a degradation strategy and a progressive improvement strategy is where you start your design. If you start with the lowest common denominator and then add more modern browser functionality to your web pages, you are using progressive enhancement. If you start with the most up-to-date, cutting-edge features, and then zoom out, you will use gradual degradation. In the end, the resulting website is likely to provide the same experience, whether you are using progressive enhancement or gradual degradation. Really, the point of either approach is to create a site that works great for modern browsers while still providing a user-friendly experience for older web browsers and clients who continue to use them.

Graceful degradation does not mean that you are telling your readers, "Download the very latest browser."

One of the reasons many modern designers dislike the graceful degradation approach is that it often translates into requiring readers to load the most modern browser for the page to work. This is not a graceful degradation. If you want to write “load browser X for this feature to work,” you leave the area of \u200b\u200bgradual degradation and move on to browser-centric design. Yes, it is undoubtedly useful to help a website visitor switch to a better browser, but this is often asked (remember, many people do not understand how to download new browsers, and your request to do so can be scary). them away). If you really want their business to tell them to tell them they are leaving your site to download better software, this is unlikely to be possible. If your site does not have core functionality that requires a specific browser version or higher, forced downloads often violate the user experience and should be avoided.

A good rule of thumb is to follow the same rules for gradual deterioration as for progressive improvement:

• Write valid HTML standards compliant
• Use external stylesheets for your design and layout
• Use externally linked scripts for interactivity
• Make sure content is accessible even to low-level browsers without CSS or JavaScript

With this process in mind, you can go out and create the most modern design you can! Just make sure it works in less functional browsers while still working.

How far back should you go?

One question that many web developers have is how far should you support browser versions. There is no precise and dry answer to this question. It depends on the site itself. If you look at traffic analytics on a site, you can see which browsers are used to visit that site. If you see a significant percentage of people using a certain older browser, then you probably want to support that browser or risk losing this business. If you look at your analytics and see that no one is using an older version of the browser, you can probably decide not to worry about fully supporting this legacy browser and testing it. So the real answer to the question of how far back your site needs support is "no matter how far back your analysts tell you what your customers are using."

Edited by Jeremy Girard.

Of course, Internet Explorer contains a large number of bugs in different versions, but with the help of conditional comments you can fight them, achieving their elimination. But what can't be fixed is that IE is hopelessly outdated. While other browsers include more and more CSS3 properties, support various newfangled technologies, IE is marking time. IE9 release will not solve the problem, and previous versions will not evaporate overnight. In such a situation, the best solution would be graceful degradation - the principle of maintaining operability when part of the functionality is lost.

Let's take a look at this trick with a small example that displays the text in a block and a button. The block and the button have rounded corners, 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 with or without a prefix, therefore, 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, in this case it is more important to work in the browsers Firefox 1.0, Safari 3.1, Chrome 2.0, Opera 10.50, IE9, as well as in their older versions. Example 1 shows how to use CSS3 properties to create drop shadow and rounded corners.

Example 1. Block with shadow

XHTML 1.0 CSS 2.1 CSS3 IE 8 IE 9+ Cr Op Sa Fx

The example result is shown in Fig. 1.

Figure: 1. Block view in Safari

The same example in IE8 and below is shown in Fig. 2.

Figure: 2. View of the block in IE8

Although the appearance of the elements varies in detail, the functionality of the page as a whole remains. The button can be pressed, the text remains the same, including its color and background, there are no display errors. In fact, the only difference is in the little things that perform decorative, not applied functions. All the principles of graceful degradation are fulfilled.

What does this approach give in practice?

• Allows you to actively use CSS3 decorative properties without looking at the browser.
• Motivates to apply various CSS3 effects.
• It makes a developer's life much easier, since he no longer has to look for solutions for outdated browsers.
• Accelerates work productivity.

Of course, graceful degradation is not always applicable. If the requirements for the layout 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, the requirements for the layout are set without taking into account the general situation. And if you compare all the advantages of graceful degradation with the disadvantage that is manifested only in the fact that outdated browsers, in particular IE8, do not display the page "nicely", then sympathy will be on the side of progress.

I haven't written for a long time, I had to move to a place without the Internet (that's horror), as a result of which I could not write to the blog. Today I want to talk about the development method (layout), which is partially used in the design of my blog.

The latest versions of innovative browsers (like FF 3.5, Opera 10) have introduced some decorative effects from the proposed CSS 3 specification. Transparency, shadows and zebra (striping) effects are now available without JavaScript or additional markup. But some older browsers that still use these properties do not, and it would be sad to think that you will not have a chance to use these wonderful effects for a few more years.

In this article I will talk about how to make nice (gradual) improvements in browsers that support CSS3 features and at the same time show a layout that satisfies other users.

What is progressive enhancement?

To understand the concept of "incremental improvement", one must understand the principle of "graceful degradation", which is well described by the following quote:

Slight degradation means that your site continues to work even when viewed in a less than optimal browser in which advanced effects do not work.
Fluid Thinking, by Peter-Paul Koch

"Gradual improvement" uses the same method only from the opposite side, instead of taking care of the site not to fall apart in the old browser, you must first of all think about the content and simply add features of modern programs to the design to improve the user experience, while the base state layouts still work on older machines. This is currently the best way to apply the new features of CSS 3.

Example

As an example, let's make a simple navigation menu that looks a little prettier depending on CSS support in any browser.

I would like to note that in this example I am not using graphics, hacks or browser-specific prefixes - all improvements are due to the declared capabilities. With that in mind, some of the things below are just for example, and may not be the best choice for building real websites.

Markup

Let's make a simple menu using an unordered list (ul):

• Lorem ipsum


• Lorem ipsum


• Lorem ipsum


• Lorem ipsum


• Lorem ipsum

Basic style

As a basic one, I'll use a style that uses only simple inheritance selectors. It creates a border on each element and changes the background on mouseover (onmouseover). This should work in any browser made in the last 7-8 years (and possibly more).

The CSS is very simple:

Ul (
background-color: blue;
border-bottom: 1px dotted # 999;
list-style: none;
margin: 15px;
width: 150px;
}

li (
background-color: #fff;
border: 1px dotted # 999;
border-bottom-width: 0;
font: 1.2em / 1.333 Verdana, Arial, sans-serif;
}

li a (
color: black;
display: block;
height: 100%;
padding: 0.25em 0;
text-align: center;
text-decoration: none;
}

li a: hover (background-color: #efefef;)

The only oddity here is the blue background

; I will explain this later. With this style, we will have the following base view, which will render in IE6 like this:

Basic layout as it will look in IE6 and other old browsers.

Applying improvements

IE7 was the first in the IE browser series to support all of the CSS 2.1 attribute selectors, which is also common in almost all other browsers. We can use one of them - the child selector - to start improving. Since IE6 does not support child selectors, it will ignore the following rules:

Body\u003e ul (border-width: 0;)

ul\u003e li (
border: 1px solid #fff;
border-width: 1px 0 0 0;
}

li\u003e a (
background-color: # 666;
color: white;
font-weight: bold;
}

li: first - child a (color: yellow;)

li\u003e a: hover (background-color: # 999;)

With these CSS rules, the list looks like this:



The menu now has a colored background and bold text, and the first link is highlighted in a different color.

This will display the list of IE7, Firefox, Safari and Opera.

Let's put more emphasis

The next step is to increase the emphasis by using a property that IE does not recognize: Opacity. We don't need to use special selectors for this, because IE will simply skip properties that it doesn't support:

Li (opacity: 0.9;)

li: hover (opacity: 1;)

The following picture shows how this property works in opera, you can see that the list items have acquired a slight blue tint from the background.

... On mouseover, each element becomes fully opaque:



You can of course use IE's filter property for the same effect in IE. As well as the browser-specific prefixes (-moz-, -webkit-) for the properties below. But for educational purposes I'll stick to the CSS standard as filter is not standard. property, then it is not valid.

Firefox 2 supports transparency, but in later browsers we can go even further. In Safari and Opera, we can decorate text using the text-shadow property:

Li a: hover (text-shadow: 2px 2px 4px # 333;)

As the following image shows, the element gets a slight shadow on hover and appears to protrude slightly from the page:



Finally, we can take care of Opera's full support for the new CSS 3 selectors and add another layer of improvements: variable background colors using the nth-child selector:

Li: nth-child (2n + 1) a (background-color: # 333;)

li: nth-child (n) a: hover (
background-color: #aaa;
color: # 000;
}

li: first - child\u003e a: hover (color: yellow;)

We will see a striped menu in the Opera:



Summary and conclusions

The image below shows how the initial markup looks in IE6, IE7, Firefox, Safari and Opera, after applying the CSS rules described in this article. as you can see, as browser support for CSS becomes more and more refined, menus become more stylish and complex, and by using a gradual improvement technique, menus remain functional even in very old browsers.



Of course, many browsers have a bunch of other properties that I haven't covered here that can be used, such as RGBA colors and SVG as background colors.