Building cross-browser plugin-free experiences


We’ve talked about how the transition to a plug-in free Web is happening today. Lots of Web browsing happens on devices that simply don’t support plug-ins. Web sites that use plug-ins need to understand what their customers experience when browsing plug-in free. In case you missed it, check out Rey Bango’s blog post where he lays out clear guidance for developers on building cross-browser plugin-free experiences and addressing issues like cross-browser CSS, media playback, and touch.– John Hrvatin, Program Manager Lead, Internet Explorer

Comments (30)

  1. Anonymous says:

    gooooooooooooood

  2. Anonymous says:

    But this isn't so cross-browser:

       -ms-accelerator

       -ms-animation

       -ms-animation-delay

       -ms-animation-direction

       -ms-animation-duration

       -ms-animation-fill-mode

       -ms-animation-iteration-count

       -ms-animation-name

       -ms-animation-play-state

       -ms-animation-timing-function

       -ms-backface-visibility

       -ms-background-position-x

       -ms-background-position-y

       -ms-behavior

       -ms-block-progression

       -ms-box-align

       -ms-box-direction

       -ms-box-flex

       -ms-box-line-progression

       -ms-box-lines

       -ms-box-ordinal-group

       -ms-box-orient

       -ms-box-pack

       -ms-content-zoom-boundary

       -ms-content-zoom-boundary-max

       -ms-content-zoom-boundary-min

       -ms-content-zoom-chaining

       -ms-content-zoom-snap

       -ms-content-zoom-snap-points

       -ms-content-zoom-snap-type

       -ms-content-zooming

       -ms-filter

       -ms-flow-from

       -ms-flow-into

       -ms-font-feature-settings

       -ms-grid-column

       -ms-grid-column-align

       -ms-grid-column-span

       -ms-grid-columns

       -ms-grid-layer

       -ms-grid-row

       -ms-grid-row-align

       -ms-grid-row-span

       -ms-grid-rows

       -ms-high-contrast-adjust

       -ms-hyphenate-limit-chars

       -ms-hyphenate-limit-lines

       -ms-hyphenate-limit-zone

       -ms-hyphens

       -ms-ime-mode

       -ms-interpolation-mode

       -ms-layout-flow

       -ms-layout-grid

       -ms-layout-grid-char

       -ms-layout-grid-line

       -ms-layout-grid-mode

       -ms-layout-grid-type

       -ms-line-break

       -ms-overflow-style

       -ms-overflow-x

       -ms-overflow-y

       -ms-perspective

       -ms-perspective-origin

       -ms-perspective-origin-x

       -ms-perspective-origin-y

       -ms-scroll-boundary

       -ms-scroll-boundary-bottom

       -ms-scroll-boundary-left

       -ms-scroll-boundary-right

       -ms-scroll-boundary-top

       -ms-scroll-chaining

       -ms-scroll-rails

       -ms-scroll-snap-points-x

       -ms-scroll-snap-points-y

       -ms-scroll-snap-type

       -ms-scroll-snap-x

       -ms-scroll-snap-y

       -ms-scrollbar-arrow-color

       -ms-scrollbar-base-color

       -ms-scrollbar-darkshadow-color

       -ms-scrollbar-face-color

       -ms-scrollbar-highlight-color

       -ms-scrollbar-shadow-color

       -ms-scrollbar-track-color

       -ms-text-align-last

       -ms-text-autospace

       -ms-text-justify

       -ms-text-kashida-space

       -ms-text-overflow

       -ms-text-size-adjust

       -ms-text-underline-position

       -ms-touch-action

       -ms-transform

       -ms-transform-origin

       -ms-transform-origin-x

       -ms-transform-origin-y

       -ms-transform-origin-z

       -ms-transform-style

       -ms-transition

       -ms-transition-delay

       -ms-transition-duration

       -ms-transition-property

       -ms-transition-timing-function

       -ms-user-select

       -ms-word-break

       -ms-word-wrap

       -ms-wrap-flow

       -ms-wrap-margin

       -ms-wrap-through

       -ms-writing-mode

       -ms-zoom

    -MS-RIDICULOUS !!!

  3. @James your point? Many of these listed are actually either:

    Working Drafts (experimental, prefixed, and everyone else is doing the same) -or-

    Don't need the prefixes anyway (-ms-word-wrap, for example)

  4. Anonymous says:

    Microsoft

    Where the heck is Internet Explorer 10 beta for Windows 7?

    Are you crapping all over us?

  5. Anonymous says:

    Cross Browser Experience is the biggest joke of 2012.

    Better say Welcome in the Browser hell

  6. Anonymous says:

    jens, Silverlight is dead, give it a rest, no more FUD please.

  7. Anonymous says:

    I think the fault for the prefix problem is the standards community's, for not adapting to the reality that now many things are more than single-vendor extensions but less than W3C recommendations.

    If I had to propose a way out, I'd say that any two or more major vendors who believe they have roughly compatible experimental versions of a feature can ask the W3C for permission to use the name, say, hyphens-v1 instead of -ms-hyphens/-moz-hyphens/-webkit-hyphens/etc.. The bar to get those names approved should be low, so they can smoothly replace today's vendor prefixes that require no approval. And we authors have fewer names to remember.

  8. Plug-in free? Let's see: Why do I love Firefox? Its security? No! Its extensibility and its vast range of readily available high quality add-ons. Yup!

    I think Microsoft marketing department must ban the use of "plug-in free". It is counter-persuasive. Perhaps you should consider "natively rich".

  9. @Fleet Command: The point is that websites shouldn't require the installation of plugins to work (Flash, Silverlight et al). Not whether or not your browser allows add-ons to enhance your browsing or not. There are plenty of web enabled devices out there now (phones, tablets, even TVs) that are never going to support plugins, so sites need to ensure they work as well there as they do anywhere else.

  10. Anonymous says:

    We will never waste our time in HTML development to support different browsers.

    HTML5 is a big lie.

  11. Anonymous says:

    Hey, it turns out there was a deep discussion of what to do about the prefix mess this past February — lists.w3.org/…/0313.html

    I'd just add that as a webdev, I think I'd like tools to manage the risk that some browser messes up implementing a nonstandard (or standard) property. ('Transform' and 'transition' have a lot of fiddly parts.)

    Maybe it's a way to tell engine X to limit what other prefixes it parses (@ms-compatible-prefixes("moz")/@ms-compatible-prefixes(none)?). Or, and this would drive standards folks insane, we could have a syntax for turning off an entire CSS rule in a context where it's known to be handled buggily (A pseudostyle like "unless: 10 <= moz <= 12, ie = 9").

  12. Anonymous says:

    Er, better pseudo-style syntax would have been -unless-user-agent: ms = 5, 10 <= moz <= 12, and you'd need a matching -if-user-agent. Or a new type of media query, but that's not really what they're for.

    Still, won't happen, maybe shouldn't — unless (ha!) it does, the workaround's basically today's combination of browser classes added by JS + CSS that natively works even on the buggy implementation.

  13. Anonymous says:

    Does plugin-free mean, that IE10 incorporates a PDF-viewer? If not, how is Metro-IE supposed to view such docs?

  14. Anonymous says:

    The article you link to talks a lot about events…  and touches on the fact that we have a standard way of adding event handlers and then we have the iOS touch events and now the MSPointer events…

    Why on earth did you not work with the W3C/ECMAScript to get a standard set of touch events put together?  You've taken 5 years of hard struggle to get IE to follow some sane level of standards and then you've gone and re-invented your own set again!!! WTF!?!?!?!?!

    Seriously! if you want us to take IE serious – you absolutely have to work with standards – developers do not want to code for IE because it doesn't follow standards… you finally get close, and then you throw it all away!

    NOT IMPRESSED… Microsoft will not be getting my support.

    and FIX THIS DARN FORM! holy mother of useless blog software!

  15. Anonymous says:

    Oh, and speaking of fail… your events are CaMeLcAsE! which is COMPLETELY INCORRECT for the modern web… all events are lower case without exception!

    Fix this before IE10 goes RTM please – better yet, sit down with the W3C/ECMAScript and standardize on event names.

  16. Anonymous says:

    While I agree that plug-in free browsing is good in some instances, like everything these days (Metro, Windows 8, HTML5), it's being taken WAY too far.  

    I don't want my bank to require me to install a plug-in.  I don't really want to rely on Adobe for rich UI experiences on the web.  I don't want 65 search toolbars at the top of my browser.  Yes, all this is true.

    But I do want to be able to install RoboForm or Last Pass (or any number of other USEFUL plugins) on my browsing devices of choice.  With IE10 in Metro, I simply can't do that so it's a complete nonstarter for me.  IE's lousy internal form filler is not an acceptible solution.  And even if I didn't mind the internal form filler, it's a terrible user experience to require users to retype form filling fields in each browser they use on each platform just because the latest fad is ZOMG NO PLUGINZ DOODZ.

    And that's just one of many, many examples.

  17. Anonymous says:

    James, browser specific extensions are PERFECTLY acceptable, that is blatantly picking a fight for the sake of picking a fight.

    If Microsoft wants IE10 to be desirable enough to be worth upgrading to Windows 8 it really has to appeal to developers and people who fix computers.

    Microsoft did the opposite by not updating and Microsoft responded by resuming IE's development, fair enough.

    IE's error handling makes it worth testing IE9 and IE10 when doing cross-browser testing, worth our time.

    If you want websites to work without plugins then you're aiming for a noble goal. However the moment you force H.264 down our throats because of Microsoft's involvement with the MPEG-LA patent pool group not only did Microsoft just do a complete 180 but you gave us developers the double deuce while walking away from us. This isn't an open-source rant, this is open-web objectivity because if open source worked I wouldn't be using Windows.

    When I sit down and open my browser it restores at least a dozen tabs, sometimes upwards of five or six dozen tabs if I'm in the middle of heavy development. IE still doesn't do that.

    I want absolute maximum usage of the toolbars that are enabled at the top of my browser. I've merged the Web Developer toolbar to the right side of the file menu at the very top of Firefox. I've got back, forward, reload, stop, home, bookmarks, downloads, history, new tab, paste and go, print, search toolbar, paste and search, adblock and firebug buttons (all icons with text labels to the right) on the navigation toolbar with the address bar below and favicons (introduced by Microsoft) without text labels filling out the third toolbar and then a dedicated fourth toolbar for tabs. Not all users need that but as a developer I'm flying all over the place and like quick access. IE doesn't even come close. This is also why I won't touch Chrome, Chrome's idea of customization is purely vanity color schemes and they took minimization to an extreme by removing the plus sign from the new tab button so even as bad bad user-hostile as IE9/10's toolbars are they do own Chrome but they're still outwardly hostile to me both in a development environment and even in a casual browsing environment like on my netbook. The favorites and command bars are on the wrong sides, besides the command bar belongs between the top bottom (on the left) and the address bar.

    If Microsoft wants make people desire using Internet Explorer we need to see full commitment to open standards and a truly customizable graphic user interface. Anything short will change nothing. I imagine that there are plenty of IE developers who agree with some if not all these notions though upper-management says otherwise, whoever upper-management may be. Keep adding standards support, support ALL codecs and make the browser easier to visually customize the toolbars, buttons, text-labels ("Developer Toolbar" renamed from goofy "F12 developer toolbar" (yes, case sensitive)) and be unconditionally friendly with those giving you good advice and you'll be amazed at what a difference the reception will be.

    "He who closes his ears to the views of others shows little confidence in the integrity of his own views." – William Congreve

  18. pmbAustin says:

    @John, Firefox/Mozilla is going to be adding H.264 support.  This is a dumb argument and a dumb line to draw in the sand.  IE9/10 support any codec the OS installs and has access to.  It's not "H.264-specific" or anything.  Install codecs for Webm, and voila.  I'm so tired of this complete non-issue whining from open-source types.  And Firefox was stupid for excluding H.264 support.  It's just ignoring the reality of the market in an attempt to be pointlessly purist.  To use your words, it's always struck me as "picking a fight for the sake of picking a fight".  FireFox was the wrong one here, and they're changing to be right.  Soon all browsers will support H.264 just fine, as long as the OS has the codecs installed.  Ditto WebM.  So what's to whine about?

    IE can restore a ton of tabs too.  You can save tab sets and open them with one click.  If the browser closed unexpecedly, you can open the last browsing session.  I'm not sure what you're even talking about there.

    I agree the customization is poor.  At least IE10 now allows a favorites bar with JUST favicons, and no text.  I can pack a lot of sites in that thing now, which is awesome.  It's a small improvement.  And I wish they'd do a lot more there… customization is something they apparently don't realize the importance of.  We need more than "Show stop/refresh before address bar" and "Show tabs on separate line".

  19. Anonymous says:

    FWIW – While in MS I learnt that the best predictor of the future, is to look back in history.

    HTML5 is suppose to allow developers to build an application once, and allow it to run everywhere.  

    Like that is suppose to happen! – ANSI SQL, HTML4, and few more dozen examples

    Vendors all want to introduce differentiation between browsers – if they all were identical, how would they win marketshare?

    Right now (in Richard Campbell words) HTML5 is in the honeymoon stage.  Everything about her is perfect during the honeymoon, but that will change when the honeymoon is over.   It all sounds great, but love is in the details.  Show me one specification for a program, and given 3 developers, you will get at least 3 if not more programs (don't forget about refactoring!)  We are just not good enough in our engineering discipline in software think we can create identical behaviour across numerious development teams.

    Line of Business applications in HTML will fail – and it will fail in a very big way.  Corporations are looking for ways to distribute application in their infrastructure, without complicated tools to deploy applications.

    IMO – Silverlight was the closest to that – single vendor, single plug-in, single behaviour – you would work with it.  HTML5 will be a support nightmare.

  20. pmbAustin says:

    Side note:  It happened again.  My laptop crashed and had to be forced to shutdown (I think I have a driver issue).  IE9 was open at the time.

    It lost ALL my cookies.  All saved info was gone.  The tiles on the "new tab" were suddenly all lost.  auto-fill fields no longer auto-filled.  Sites forgot who I was.  

    THIS IS ANNOYING.  THIS MUST BE THE HIGHEST PRIORITY BUG FIX YOU HAVE.

    A non-graceful shutdown shouldn't result in losing all cookies and local site-data, recently visited sites, erasing the history of the new-tab site tiles, etc.

  21. Anonymous says:

    Agree with pmbAustin, it is the biggest thing keeping me away from IE.

  22. Anonymous says:

    @Richard Reukema: there are specs, implementations must match the specs. If they don't, it's a bug. If the specs are not clear, they should be detailed. That's it. It has worked well enough with HTML, CSS and JS in general so far, and keeps getting better.

  23. Anonymous says:

    posible de redider en francait

  24. HTML5 is good for replacement for some services such as Youtube… since they already have HTML5 video Playback….However, it would not be good for LIVE streaming video….How Metro IE10 and HTML 5 tag handle live streaming????

  25. Konstantinos says:

    IE9 and later has been greatly improved in the UI, but I think you need to improve more the performance and the delay when opening and closing tabs (e.g. add more parallelism, hide the closing tab first and then shut it down in the background). Also, I have noticed that IE9 changes the rendering of some HTML content when the user selects it. I think this is a big bug.I also think that it would be nice for IE to be able to load .NET or native addons and you to provide samples on how to write an addon (I know there is addon support for IE but judging from the number and quality of the existing addons, I don't think the current interface or documentation is good enough).

    "Also, I have noticed that IE9 changes the rendering of some HTML content when the user selects it."

    On that, here is what you need to reproduce the bug:

    netload.in/…/Desktop.rar.htm

    Looking forward to hearing sth from someone…

  26. Konstantinos says:

    I αλσο want you to improve the CHM reader (hh.exe) and the CHM compiler (hhc.exe of HTML Help Workshop) in Windows. CHM files are WIDELY used today and your OS has problems dealing with them. First of all, when a CHM file is located in a path that contains the '#' character the reader fails to read the HTML pages inside it. Also, the reader uses an older version of IE (as far as I have understood) and does not render corectly the HTML pages, does not support Javascript and generates REALLY annoying error messages when javascript code tries to execute. Also the compiler (hhc.exe) has MANY problems, as well as the HTML Workshop itself. I have bothered writing an app that replaces HTML Help Workshop and uses hcc.exe to compile the CHM but the bugs in hcc.exe were more that I thought. Can you please fix any of these ?

  27. Anonymous says:

    Quick question. Are we going to have to wait for windows 8 before ie 10 comes to windows 7?

  28. Anonymous says:

    You must have IE on other platforms too (iOS, OSX, Linux etc), why? The reasons companies like google have been  successful online is because they have a presence on many platforms. MSFT has an internet division but it’s only  conformed to windows OS, the internet means content is available any where no matter the device you use, this what companies like Google, facebook did an made them win  a lot advertising money. To increase IE market share including Bing, IE has to spread or grow tentacles to other competing platforms rather than spending millions on market this products have them in any platform the users are so they try them and enjoy them on what ever platform. The future is in Windows Azure (one MSFT VP said Windows Azure is the future of operating systems and he was right), the back end products of MSFT must have presence in all PC platforms, including Windows, Apples OS and Linux one way of doing this is through IE besides native apps of those platforms. There is one major advantage here, if IE was able to process both HTML5, Silverlight/xaml and others on any platform including windows then developers wont have to learn new languages just to deploy to the web like HTML/javascript, this way they can truly ‘right once and run any where’(but windows PC OS remains home to them). This also reduces friction in this industry too. Just try it once, and see what happens to IE’s market share including bing, Azure and other MSFT web services.

    MSFT has three divisions (web services like bing, hotmail etc, windows PC OS, Windows Azure) that can hedge against  each other and also help accelerate each other, the problem is you using other products like IE to accelerate one of them windows PC OS, but you not using other products like IE to accelerate other products and services like Azure and Bing.

  29. Anonymous says:

    Do you guys come to the IE blog to release your anger and stress?

    Front-end devs are the greatest drama queens.

  30. Anonymous says:

    Like to see ms focus on getting standards to a) sanatize javascript into a language like coffescript and b) layer html, css, script, etc web standards into level 1, 2,3,4,5,6…. so that devices can be verified against level X (e.g., a cellphone with limited resources would not be as advanced as a desktop) and be printed into the specs for that device.