5 Replies Latest reply on Jan 6, 2012 6:34 AM by mhollis55

    HTML5

    upstart1762 Level 1

      Looking at purchasing a Dreamweaver extension (HTML5 Banner Rotator from FLash development 24.com) that seemingly only works with HTML5. Question - do Dreamweaver HTML5 files work across all browsers? The product description claims this extension will work in Internet Explorer | Netscape | Mozilla Firefox | Opera | Safari | Google Chrome. If so, do I just copy my code and CSS into a new, HTML5 doc, add extension, and I'm good to go?

        • 1. Re: HTML5
          Ben M Adobe Community Professional

          HTML5 does not work across all browsers, only modern versions.  If you are worried about IE 8 and earlier or some earlier versions of Firefox, Chrome, Safari, etc., HTML5 may not work.  It will not work in Netscape as far as I know because that development stopped before HTML5 was started.  Also with video, there is a commercially available option like Pickle Player ( http://www.pickleplayer.com/ ) which I have seen recommended many times for embedding video across multiple browsers.

           

          If I were you I would inquire with that company about how they are supporting the older browsers with their extensions.  It would give a lot of insight as to what will happen so you know when you use it.  And feel free to post back about it.  I've never actually heard of this company, but I would be interested in hearing how their extensions are working.  And one thing that stands out to me is they have no mention of iOS or Android so I'd be interested in hearing about their mobile information.

          • 2. Re: HTML5
            upstart1762 Level 1

            Thank you for your insight. I have exchanged a few emails with them (they're in Germany). They claim it will work with all browsers that support HTML5 (so I'm guessing not IE 8 or earlier). They say "HTML5" in the Banner just states that it is based on HTML5 features. Not totally clear on what that means.

             

            They do say it "will work on iDevices like iPhone and iPad". See full product description here: http://www.flashdevelopment24.com/extensions/html5_banner_rotator.aspx

             

            I have purchased it, so I will try it out and see how, when and where it works. I'll post back.

             

            Thanks again!

            • 3. Re: HTML5
              mhollis55 Level 4

              Here's the deal with HTML5.

               

              Modern browsers support it, but there is a difference between some of the new styles and form elements and support for a doctype.

               

              For example, one of the new form elements is "number." When you have that in an "htlm5" form, the keypad may change on an iPhone or an Android phone to the numeric keyboard. I don't think it does anything special on a desktop computer. because there is no "number" form element in HTML4 or XHML, the browsers that do not support these elements (read do not support HTML5) default to "text." This means, you can use these new form elements that are in HTML5 and the new browsers will support that, the old ones will support the fact that you have a blank there, but won't support any special aspect of the form.

               

              A lot of what we are calling HTML5 is really CSS3. Here is an example of a gradient background I made for a client. Now the doctype is clearly not HTML5. If you look at the code for the page, it will say:

               

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

              <html xmlns="http://www.w3.org/1999/xhtml">

               

              Additionally, you will note that the navigation also uses CSS3 elements with rounded cornered buttons. If you look at it on a mobile phone, it has no sidebar.

               

              The entire website degrades nicely in Microsloth's Internet Exploiter 7 and 8.

               

              So, understand that "HTML5" is coming to mean a whole bunch of things, including "works on Mobile," "Increased Semantics" "has gradients" "has rounded corners" and so on.

               

              Here is the caveat for your purchase: If it does not degrade well on the older browsers, the worst offenders being IE 7, 8, 9 and 6, your result may be unsupported. Remember, a doctype declaration is not everything.

              1 person found this helpful
              • 4. Re: HTML5
                upstart1762 Level 1

                Understood, and thank you. I will have to keep it simple and see what works and what doesn't. But clearly, once again, we are all held back by IE's stranglehold on the market, and their comfort level with trailing the pack. I'm amazed at how long it has taken for the masses to walk away from IE.

                • 5. Re: HTML5
                  mhollis55 Level 4

                  IE's "stranglehold" is due to a monopoly and a monopolistic practice. I think the European courts decision to require that Windows offer a "browser choice setup" upon installation with IE being only one of the choices ought to have been followed worldwide. Anyone who wants a safer browser experience ought to choose a non-Microsoft browser.

                   

                  But I test everything I do in IE7 and IE8. I develop on a Macintosh and I use VirtualBox running those browsers to check to make sure that I do get something working in them, even though it may not be the optimum. There are methods that use IE's peculiarities in CSS that will give you a graduated background. The only method that will give you rounded corners in those browsers is actual graphic images with rounded corners.

                   

                  And the CSS for all gradients is browser-specific: There is a call for WebKit (actually two, because one supports earlier versions of Safari). There is another for Firefox and there is another for Opera. So, on one site I have the following for a background in the body:

                   

                  body {

                            font-family: Arial, Helvetica, sans-serif;

                            font-size: 100%;

                            color: #000000;

                            background-color: #fff;

                            margin: 0;

                            padding: 0;

                            background-repeat: no-repeat;

                            background: #402a67; /* Old browsers */

                            background: -moz-linear-gradient(top, #402a67 0%, #ffffff 70%) fixed no-repeat; /* FF3.6+ */

                            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#402a67), color-stop(70%,#ffffff)) fixed; /* Chrome,Safari4+ */

                            background: -webkit-linear-gradient(top, #402a67 0%,#ffffff 70%) fixed; /* Chrome10+,Safari5.1+ */

                            background: -o-linear-gradient(top, #402a67 0%,#ffffff 70%) fixed; /* Opera11.10+ */

                            background: -ms-linear-gradient(top, #402a67 0%,#ffffff 70%) fixed; /* IE10+ */

                            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#402a67', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

                            background: linear-gradient(top, #402a67 0%,#ffffff 70%) fixed; /* W3C */

                  }

                   

                  If you look at the comments, you will see what supports what. The comment that says W3C is the current proposal but, since there is no agreed-upon standard that will not work on all browsers. And, as you can see, I have assigned one flat color for all browsers that do not support gradients. Please note the "fixed" option maintains this gradient despite scrolling.

                   

                  This is a lot of code, just to replace a three-pixel wide, 350-pixel high JPEG file that repeats-x. It is preferrable because it's the direction we all seem to be headed.

                   

                  Again, this CSS3 markup works, regardless of doctype declaration. Newer browsers support it, older browsers use the fall back.