Principles of “smart” web design. It's time to rethink vendor prefixes for CSS, starting with today's browsers

Zmist:

The -webkit- prefix dominates the CSS layout, so sites will not work correctly without it. This is evidence of the development of software developers to the most basic practices, which ultimately led to a short-lived, or practically forced, decision on the part of Mozilla. U Firefox versions 46 or 47 (this month or 2016), Mozilla plans to implement support for non-standard -webkit- prefixes in order to improve Firefox's ability to handle sites that actively use -webkit (usually sites targeting mobile devices).

Tim is not a mensch, rozrobniki zastosovuyut prefixes, so as to vikorystuvat new possibilities Browsers are as fast as possible. Prefixes screamed discord from the dominance of WebKit, but they also caused the web to collapse forward at an accelerated pace.

The Mozilla and Microsoft approach is secure for most sites. On many sites the prefix -moz- will be used, otherwise there will be no need for daily actions to cope with the future Firefox update. As professional web developers, we must take a careful look and understand what consequences this will cause. You, of course, know which of your sites may be affected by this update.

Well, the time has come to rethink the approach to prefixes and protest sites with them.

Optimized prefixes

There are very few -webkit- prefixes that Mozilla can implement. Based on the data I collected, Mozilla will not compare its list of supported prefix authorities with the Edge list, since not all of them are needed for the functionality of the layout engine.

Firefox retailers are also close to a similar approach:

The current trend at Mozilla is not to use vendor prefixes for the sake of inclusion of unprepared authorities and to use unprefixed versions for sufficient stability. This is a dirty policy: there are many possible faults - Boris from Mozilla

Microsoft Edge You also want to use vendor prefixes:

Microsoft is also planning to accept vendor prefixes in Edge. This means that developers who want to ignore the specific features of HTML and CSS will not choose the Edge-specific prefix. It’s boring to just write code that conforms to standards” - Mashable

There will be no more incremental degradation based on prefixes

This uniqueness of vendor prefixes means one thing - progressive degradation beyond the help of vendor prefixes holds no prospects.

The use of vendor prefixes to create styles for a specific browser (for example, especially for Chrome) was not introduced; The recommendation for developers is to change all prefixes from now on (from -webkit- to -o-). If you have vikoryst possibilities that lie with the prefix authorities and vikoryst prefixes for the progressive degradation of your design in other browsers, it no longer works.

Visnovok

The hours are changing. The dominance of WebKit has inadvertently caused problems in a way that prevents the developers of other browsers from implementing the -webkit- prefixes. This problem arises in the world of browser vendors based on vendor prefixes, but it is still up to vendors to verify that prefixes do not cause inconsistent results in non-WebKit browsers.

From this article, we will try to figure out what the difference is between the two principles of creating a website based on “sensible” web design: Progressive Enhancement and Graceful Degradation.

Graceful degradation

Graceful degradation, or “visibility” is a broader concept, which is not uncommon in web design. In general, it is reasonable to convey the validity of the system to work with different components. And the more serious the problem, the lower the efficiency of the robot system or the robots with the system, and in this case the main functionality of the system is deprived of the workers.

Graceful degradation can manifest itself in the ability of a robot to work with JavaScript enabled, a neatly rendered site in a browser without the need for CSS3 specifications, or an adequately rendered site with images included. All of you are not to blame for using web programs. However, if everything works out, then the koristuvaches are much more likely to get involved with the site.

If we look at a specific example, for example, in the case of designing a web interface, this principle can be formulated as “the system can work with JavaScript enabled, but with JavaScript enabled, it will work much better.” The point is not that there may be such a situation that JS is disabled or does not function properly, or why not. This situation is taken as a given. The designer is responsible for developing such an interface that will work most efficiently, even if JS is included.

Often, to complete the implementation of this principle, it is necessary to rework the logic of server-side form processing. However, such an approach will pay off if you think about fluid resistance at the form planning stage.

Adhering to the principle of graceful degradation allows clients (a skin client is a potential client) the ability to work with the site in any situation.

Progressive Enhancement

Progressive enhancement is a principle that, at the same time, “mobile first” creates a theoretical basis for “sensible” (adaptive) web design. Even so, it seems that the creation of a web site is positioned step by step, cyclically, following a principle ranging from simple to complex. On the skin, from the following stages, the external appearance of the site should become beautiful, attractive and powerful, while all functionality should be available to the eye.

Let’s call it more graceful degradation , All items created on the new web site fully comply with the principle of graceful degradation.

Based on the principle of progressive expansion, the process consists of the following stages:

  • Creation of the side on the “clean”HTML
    At this stage, a fully functional page is created, which consists of just one HTML code that is semantically and logically correct, which means it can be interpreted by any browser, in the simplest terms. At this stage, no formatting is carried out and the browser itself formats the page according to the same standards as in the new insert. Progressive improvement is due to the fact that the first stage is the most important, since the Internet has nothing valuable, no content.
    Short: creation of semantic and logical document structure
  • Additional rulesCSS
    At which stage the CSS table is set to the old format: a layout grid is added, elements are positioned, and the old format is set background images for blocks, the styles, colors and images of texts change. By the way, the page takes on a new stylized look and becomes beautiful and welcoming.
    Short: giving an external appearance to the document
  • Zastosuvannya CSS3
    Now all the effects and shortenings can be applied to the document by transferring it to the CSS3 specification. To add clarity, shadows, rounded edges for blocks, animated smooth transitions for pseudo-classes or form elements.
    Short: due to ignorance from the outside looking in document
  • Creation of scripts onJavaScript
    At this stage all the effects and principles of interaction between the web page and the client using JavaScript are created. If you ask for AJAX, then dynamically inspired or data verification, animation effects and widgets (for example, Prototype or jQuery). We have carefully sealed the side, which is handy for the kistuvach.
    Short: mutuality, interactivity, handiness

Let's try to put this approach into practice. We'll fill out the simplest form for entering the site. At the first stage, we create the login form in pure HTML. The shape is not so beautiful, but rather functional. Below is the page code and the result of the display in the browser:

Now, at another stage, we need to create a style that contains a style sheet before it, in order to remove the rules of how to set up CSS without special authorities. Add background color, input, and leveling. Now the form looks better:

Now let's add the rules of the CSS3 specification. In addition to fixing to blocks, shades for text input fields, stylizing the button, using new selectors, we will select unnecessary access to the animal. The colored form can be removed:

At the next stage, we can create an AJAX request so that the user can access the site without having to re-engage the page.

At each specific stage (if supported by your browser), a functional page will be displayed. If the browser supports advanced technologies, then the page becomes even more beautiful.

What principle should we follow?

If the site follows the concept of graceful degradation as effectively as possible, the results will be approximately the same as what would have happened with the use of progressive enhancement. So what is the difference?

On the right, it’s difficult to make a site follow the principle of graceful degradation, because not a lot of developers can work very clearly. In its simplest form, graceful degradation can be done this way: create a site for the remaining version of the browser, and then show users a notice indicating that they need to cancel their engagement. new versions browser. In this case, readers may not complain about how the site looks in older browsers. Another example of nasty graceful degradation is the failure to disable site functionality when JavaScript is enabled. Red butt – please post on Facebook.com.

This progressive enhancement is due to the unclear graceful degradation. Designing such interfaces has become simpler and clearer, since the stages of creating the interface are clearly formulated.

U responsive design This is the concept of “mobile first”, as suggested by the concept of progressive enhancement, which calls for activities from simple to complex, from mobile screens to desktop PCs. The key to proper implementation of adaptive web design lies in the mind of the designer to establish the principles of progressive enhancement and mobile first.

I am happy that the difference between Progressive advancementі Vitoncheni Degradatsii. I think it's the same thing.

Could you please explain the difference between the two and in what situation would I be victorious over one another?

8 episodes

The stinks may be the same, but the stinks may differ in context.

There is a class of browsers under the name “browsers of class A”. These are your typical audience members who will (certainly) become the largest audience. You will be separated from the basic level of these koristuvachs. Namely tse the best daily practices.

What do you want increase proof for those who like FF3.6 or Safari 4 or any other distributor whizbang nightly webkit whathaveyou, you want to develop amazing speeches, like

  • rounded corners via css
  • shading text (well, be kind, God, don’t be too rich)
  • drop shadows (amazing sight at the temples)

It’s a shame to stop your site, but it doesn’t harm you. Tse progressive advancement. Oh and spitting mayday from the looks of it best practices.

On the other hand, your new Nintendo site adds a sufficient number of IE5 users. Bіdolashny you, but you also want to roll over so that the stink will continue to turn around. You can provide an alternative to your ajax behavior by including the ajax script in your own file, and if their JS is not included, your messages may update the entire site. So let's go. From the point of view the best daily practices, you will find that historical markets are served similar to a functional website. Tse thinning degradation.

The stench is basically identical, but differs from the point of view of priority for rich teams of specialists: PE to finish as soon as you have an hour, and GD often necessary

If your site looks good in all browsers, and if any browsers reject, say, dancing ponies, then they encourage dancing ponies, then there is a progressive reduction. This works in all browsers, but some browsers will also support this. This term will be used in conjunction with other Javascript functions that can improve the user-friendliness of the "raw HTML" format.

If your site looks only the way you see it in browsers that generally support, say, CSS3 and IE8 - display the same page without, say, rounded cuts This is why degradation is reduced. Website for effective purposes current browsers Ale vin, as before, is vikorist in older browsers, it’s just not so chimerical.

Seriously, the smell is effective of the same thing that can be seen from two different points of view.

directly from the image basic the skin's understanding of carnage.

subtle degradation begins at the ideal level of the employee's knowledge and changes in the capacity of the customer's agent to the minimum level of service agents who do not support the singing functions , which is based on the base line.

Progressive advancement begins on a broad minimum basis and increases the capabilities of the agent to a greater level, supplying resources for agents that support more daily fun ktsії, lower basic.

I think it would be possible to use different concepts if the time/budget allows. Either way, the degradation is more subtle.

Vibachte, that I am resurrecting now, that is older than fate, but having realized that I can earn my deposit, with the singing world, my powerful thought from this food.

Although I’m good with Alex Mcp and deceze to the singing world, the terms “refined degradation” and “progressive improvement” may have even more meaning, below I stand.

advanced degradation, a lot of time (in my opinion), there is more force to beat the extra money from the vystava after that, as soon as the urges are completely rotten in my opinion. Who will be so great javascript object, which the koristuvachev is doing very well, to play until the manager arrives, he checks the speech, and everyone runs screaming, throwing their hands, when on the right they reach their respect, that their program does not work in 35% of browsers. "Who better to create a spare option for this one."

Progressive advancement I would like (and this is such a harsh term, to say the same), there would seem to be more about the creation of something that simply works, on cob level, through, for help from the most powerful available methods to ensure all the functionality required by the system. Then you can add neat little unobtrusive pads, styling, etc., which actually brightens up the appearance of the kistuvach, which is visible, and not just make it more suitable for the vikoristan. "That looks cool. It works in IE6. Oh well. Win Robit"

I think maybe giving style as a butt of both terms in the two shortest points here seems to be missing the real underlying usability problem that progressive advancement often depends on its nature, where advanced degradation Ignores, nothing is wrong.

The tirade is over...

The practice of creating web functionality has been sophisticated, so that it provides the greatest level of corrosive information in more current browsers, and it is also sophisticated that it is degraded to greater extent. low level koristuvacha in older browsers. This lower level is not so suitable for vikorists for visitors to your site, but as before, it gives them basic functionality, since they came to your site to vikorist; Speeches are not broken for him.

The progressive movement is similar, but everything happens by chance. You start by establishing a basic level of knowledge that all browsers can provide when rendering your website, and you also create more functionality that will automatically be available to browsers that can render them and.

In other words, subtle degradation begins with the status quo of complexity and seeks to be corrected for I'll tell you the least, since progressive expansion begins from the basic, working butt and gradually expands for future and superfluous environments. To reduce gracefully means to move backwards, while to increase progressively means to move forward while keeping your feet on the hard ground.

Vitoncheni Degradatsii

advanced degradation The identity of the computer, machine, electronic system or support measures shared functionality However, if most of it is destroyed or put out of order. Meta graceful degradation can avoid catastrophic failure.

sophisticated degradation is one of the solutions. This practice was created for the website or as an addition, so we will ensure garnished rhubarb Koristuvalnytsky's information in modern browsers However, this is not the case with older browsers. The system may not be as user-friendly or beautiful, but the basic functionality will work on older systems.

A simple example of a vikoristannya of 24-bit Alpha-visionary PNGs. These images can be displayed in current browsers without problems. IE5.5 and IE6 show images, but the visibility effect is not applied (if necessary, you can apply it). Older browsers that do not support PNG will show alt text or empty space.

Developers who accept advanced degradation often indicate their level of browser support, for example, Level 1 browsers (short evidence) and Level 2 browsers (high-level degradation).

Progressive advancement

progressive advancement This web design strategy that reinforces accessibility is semantic HTML layout and external style sheets and scripting technologies. Progressive enhancement of Vikory web technologies in rich mode, which allows users to gain access to basic content and functionality of the web page, whether it is a browser or an Internet connection, as well as an extended version of the web page we'll stick it in more software security browser or greater bandwidth.

Progressive advancement is similar to the concept to the graceful achievement of the gateway. The website or program will install the basic level of the Coristuvian Internet for most browsers. More advanced functionality will be added if the browser supports it.

Progressive reduction does not allow us to choose supported browsers or switch to table-based layouts. We choose the latest technology so that the browser must support HTML 4.01 and standard retrieval/website views.

Let's return to our example image, we can see that our program can work with all graphic browsers. We could have used a little more bitterness GIF images Please note, or replace them with 24-bit png, if the browser supports them.

posilannya

Wikipedia: Progressive advancementі

I haven’t written for a long time, I happened to move to a city without the Internet (the os zhah), so I couldn’t write in the blog. Today I want to learn about the layout method, which is often used in the design of a blog.

U remaining versions Innovative browsers (such as FF 3.5, Opera 10) have introduced several decorative effects from the established CSS 3 specification. Visibility, shadows and zebra effect (smoothness) are now available without JavaScript or additional size Itki. But in many older browsers, there are no such authorities, and it would be crazy to think that you wouldn’t have a chance to vikory and have many more amazing effects.

In this article, I will talk about how to develop techniques (steps) enhancements in browsers that support the features of CSS3 and thus show a layout that satisfies other developers.

What is progressive enhancement?

To understand the concept of “incremental improvement”, then understand the principle of “graceful degradation”, which is best described by the following quote:

A slight downgrade means that your site will continue to function because it will not be viewable in a less than optimal browser, in which the effects will not work.
Fluid Thinking, by Peter-Paul Koch

“Stepwise improvement” follows the same method only from the other side, instead of turbos so that the site does not fall apart in an old browser, you first need to think about the content and simply add features to the design daily programs In order to polish the design process, the basic layout process is still running on old machines. This is currently the best way to take advantage of the new features of CSS 3.

butt

For example, a simple navigation menu will be created, which will look a little more beautiful in the context of CSS support in any browser.

I would like to note that in this application I do not use high-quality graphics, or browser-specific prefixes - all abbreviations for the sake of declared capabilities. May we respect the actions of the speeches below, especially for the butt, and may not best choice from created real sites.

Razmіtka

A very simple menu, a very disorganized list (ul):

Basic style

As a basic one, I will stagnate the style that vikorist only uses simple selectors. It creates between the skin element and changes the background when you move the mouse over it. This can be used in any browser built in the last 7-8 years (and possibly more).

CSS is even simpler:

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 beauty here is the blue background

    ; I will explain this later. With this style, we will have a basic look that will appear in IE6 like this:

    Basic layout, as it looks in IE6 and other older browsers.

    Zastosuvannya painting

    IE7 was the first in the IE series of browsers to support all attribute selectors with CSS 2.1, which is also more common in many other browsers. We can tweak one of them - the child selector - to start adding color. Since IE6 does not support child selectors, it ignores the following rules:

    Body > ul ( border-width: 0; )

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

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

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

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

    Using these CSS rules, the list looks like this:

    The menu now has a different color scheme bold text, and also the first one sent is highlighted in a different color.

    This is how to display the list in IE7, Firefox, Safari and Opera.

    Much more accent

    Let us now place a greater emphasis on the victorious and power that IE does not recognize: Opacity. We need to create special selectors for this purpose, because... IE just skip those that you don't support:

    Li (opacity: 0.9; )

    li:hover ( opacity: 1; )

    The following picture shows how power works in the opera, you can see that the elements of the list have added a light blue tint to the background.

      . When you move the mouse over, the skin element becomes completely invisible:

      You can especially use IE's powerful filter for the same effect in IE. Just like browser-specific prefixes (-moz-, -webkit-) for lower-level powers. But for this purpose I follow the CSS standard, since filter is not It’s not standard power, but it’s not valid.

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

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

      As the following picture shows, the element, when hovered, acquires a slight shadow and appears slightly protruding from the side:

      Ok, you can support Opera's renewed support for the new CSS 3 selectors and add another ball of augmentation: changeable colors for the background and selector nth-child:

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

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

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

      We'll help you taste the menu at Opera:

      Pouch and rifle

      The picture below shows how the cob layout looks in IE6, IE7, Firefox, Safari and Opera after the CSS rules described in this article have been applied. As you can see, as browsers' support for CSS becomes more and more sophisticated, menus become more stylish and foldable, and with the help of technology, menus are constantly being expanded and are no longer working in even older browsers.

      Of course, a lot of browsers are at the mercy of other authorities, which I have not described here, and how you can be victorious, for example RGBA color ta SVG yak colori background.

      Of course, Internet Explorer to take revenge on the great number of mercy different versions But for the help of mental comments, you can fight them, trying to suppress them. Anything that cannot be corrected by anything is something that is hopelessly outdated. While other browsers include more and more CSS3 features and support all sorts of new technologies, IE is stuck in its tracks. Exiting IE9 does not fix the problem. previous versions Which one shouldn’t be ignored. In such a situation the best decisions graceful degradation will be refined - the principle of saving value while sacrificing some functionality.

      Let's look at this technique in a small example, in which the text is displayed on the block and button. The block and button have rounded corners, and a slight shadow is also added to the block. Currently, browsers for CSS3 rely heavily on the specific authorities of their prefixes:

      • Firefox – powers that begin with -moz-;
      • Safari and Chrome - powers that start with -webkit-;
      • Opera - authorities that begin with -o-.

      Different versions of these browsers can understand the actions of authorities either with or without a prefix, so for the sake of universality a number of authorities are added at once. So, to create rounded curls we need an advanced style.

      Moz-border-radius: 10px; /* For Firefox */ -webkit-border-radius: 10px; /* For Safari and Chrome */ border-radius: 10px; /* For Opera and IE9 */

      I want to reduce these authorities to the point of invalidation CSS code, in this case important robot V Firefox browsers 1.0, Safari 3.1, Chrome 2.0, Opera 10.50, IE9, as well as their older versions. Exhibit 1 shows the use of CSS3 controls to create shadows and rounded corners.

      Butt 1. Thin block

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

      Block

      You need to go through 20 meals, so you can select from the database in a random order. To pass the test, it is sufficient to correctly identify at least 75% of the food supplied (15 or more foods).

      The result of the butt is shown in Fig. 1.

      Rice. 1. Block view in Safari

      The same butt in the IE8 browser and below the representations in Fig. 2.

      Rice. 2. View of a block in IE8

      Although the appearance of the elements varies among the details, the efficiency of the side is preserved. The button can be pressed, the text will be lost by itself, including its color and depth, there are no symbols. In fact, there is less difference in devices that have decorative rather than applied functions. All the principles of refined degradation of Wiconia.

      What does this approach give in practice?

      • Allows you to actively exploit the decorative power of CSS3 without looking at the browser.
      • Motivates to highlight various CSS3 effects.
      • The life of the developer has become much easier, as there is no longer a need to find solutions for older browsers.
      • Accelerates work productivity.

      It’s clear that degradation has become stagnant for a long time. Since the pre-layout instructions include tweaks to older versions, it will be possible to find alternative solutions, for example, for rounded corners to distort images. All you can do is post it before layout without addressing the hidden situation. And if we balance all the advantages of sophisticated degradation with the shortcomings that manifest themselves in the fact that outdated browsers, including IE8, do not display the page “beautifully” enough, then sympathy will appear on the progress.

Application © 2022 Mobile and computer gadgets