Legend

Question

IE9/10 is dead, so what's the future for Dw?

Forum|Forum|9 years ago
January 12, 2017
9 replies
4272 views

Hi All,

As promised, I am starting this discussion in response to the news that Bootstrap V4 will use flexbox as it's default for layouts, and will NOT support IE9.

See - https://forums.adobe.com/thread/2259854

Microsoft has now also dropped support for IE10. This means that unless you, your users, clients or company is paying a lot of money to Microsoft for extended support for IE10, no more updates will be released for that browser. This effectively means that over the next year it will also become an, 'also dead' browser.

With the above marking a turning point for what is now possible in web design and development, html 5.1, css3 and modern javascript now becomes usable, but support for what is now possible is lacking. Not just in Dreamweaver but in most code editors and IDE's.

Support for Flexbox and css grid layouts is missing, 90% of the html 5.1 specs don't have any real support, (picture/srcset, Base64 to name just 2) and modern JavaScript api support and development is so difficult most web developers unless specializing in javascript avoid them.

Sitepoint have a short article on what is now usable, but is woefully incomplete -

https://www.sitepoint.com/front-end-development-internet-explorer/

Trying to get features included in any program is often a long process, and will not be done in the space of 1 year, (Adobes current update schedule) unless enough people ask for them, and have a clear idea of just what they want, and even then expect most 'requests' to take 2-3 years.

For me my list of priorities would include, (not counting the bug fixes, etc. that many users have complained about regarding Dw 2017) -

Support for srcset, both in Dw and the creation of the images in Ps.

Base64 encode/decode, css shapes support.

Full support for flexbox, with a visual creation tool if possible for css grid layouts.

css animation support, Dw to have a simple visual tool for simpler animations, such as animating a menu.

css animation support in CC Animate, to fill the gap between simple animations, (creating in Dw) and html5 canvas animations.

Javascript console, de-bugger, documentation support.

Full code hinting for all the above, and a separate auto-prefixer.

Dw is still missing full support for css @wiewport, css @support, css variables to name just a few css properties.

If you look at this page -

https://www.w3.org/Style/CSS/current-work

You will see that most of the items that are already Candidate Recommendations are not supported, and Working Draft specs are almost none existent.

Yes, you could say that WD specs are subject to change, in that case stop using css transforms and transitions, or anything that is not a recommendation, as all specs are subject to change, even if it is just adding a next level spec.

Dw and all web related products that we use, urgently require updating to meet the new challenges and possibilities of what is now possible and will become usable over the next year. If you can think of any feature, spec, item that you wish to be supported, then please add your view comments to this discussion.

If however you simply wish to complain about Dw and Dw 2017 in particular, start your own discussion.

This topic has been closed for replies.

pziecinaAuthor

Legend

For those interested in using css shapes, there is a polyfill available, (works back to IE9).

It is best if one uses it with simple shapes.

https://github.com/adobe-webplatform/css-shapes-polyfill

pziecinaAuthor

Legend

Now for the big news -

Not only will Chrome and Firefox support css grid layouts by default within the next few months, but so will Safari.

Safari 10.1, ( iOS Safari later this year ) is to also support css grid layouts by default -

https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_1.html

pziecinaAuthor

Legend

This is the last demo, requires Chrome or Opera, (with experimental features enabled) Safari and iOS Safari V10, or Android V5.3 -

CSS Shapes Level 1, gives us the possibility to wrap text around a shape.

The final image on this test page shows that it is also possible for text to be 'shaped' to match the outlines inside an image, (both the text and image used for this are actually in the html, and not a background image with extra mark-up added.

http://www.pziecina.com/Adobe/CSS Shapes/first_trial.html

If you cannot see the effects clearly -

Resize your browser to about 1200px width.

pziecinaAuthor

Legend

BenPleysier

Hi Ben,

At my coffee meeting this morning, we discussed css grid layouts, and the examples I posted, (feedback for using by end of year are good, btw.). During the discussion someone mentioned that 'compass' has an 'plug-in' for css grid layouts, and I was wondering if you know anything about it?

I am not a fan of pre/post-processors as you know, and using autoprefixer to insert the IE implementation code I found to cause more problems than simply writing the code myself, (it is very simple I found) but if compass does have a 'plug-in' that would simplify the process for users, it may help those who do use them.

pziecinaAuthor

Legend

Forget it Ben, I found it, and it is for generating grid layouts using css, (similar to Bootstrap).

I think that the confusion between using the css grid layouts, (as per the spec) and grid layouts using css will be a major obstacle, as 90% of web developers will obviously be thinking that css grid layouts, are nothing more than layouts using css to generate a grid. Even trying to explain the difference is difficult .

pziecinaAuthor

Legend

For those users who have IE10/11 or Edge browsers, I have uploaded a css grid layout for those browsers separately, (no media queries, so not fully responsive) -

http://www.pziecina.com/Adobe/ie_grid_starter.html

This is to demo the differences in css code required. Remember though that Edge will hopefully update its support to the new syntax by the end of this year.

I have also included at the end of the css styles an example of targeting browsers using the @support rule. For full browser support one would place ALL the new syntax inside such a rule, with the IE10/11 rules outside this conditional rule.

Important -

There is a bug with the IE10/11 implementation, in that the max-width for an image does not work correctly when using css grid layouts in those browsers. Lines 17 to 20 show a work around. I do NOT think this will be any problem for anyone, as IE10/11 are desktop only browsers, so increasing in layout size is what matters and that works.

Should anyone have any questions about using the IE10/11 syntax please start a new discussion, and I, (and hopefully others) will do our best to answer them. Remember though that no one is an expert in css grid layouts yet

pziecinaAuthor

Legend

A few demos of what one can now do, (a few bugs as these where concept creations) -

This was created in 2012, and shows what is possibly using css animations, (does not work in IE10/11, see creation date) -

http://www.pziecina.com/Adobe/3d_lightbox/3dcarousel_withLightbox.html

A flexbox layout with lightbox, (original 2011) with a few updates, thank you Jon and OS for finding the bug. -

http://www.pziecina.com/Adobe/lightbox/lightbox.html

Multi-column layout, (no hacks, 2011) -

http://www.pziecina.com/Adobe/columns.html

css grid and flexbox layout, (you will currently have to enable the 'About' flag', but Chrome will have this enabled by default in 2-3 months time, no IE falback, yet.) -

http://www.pziecina.com/Adobe/grids_demo.html

Except for the css animations demo, all are fully responsive layouts.

To enable the Chrome 'About' flag, see -

http://blogs.adobe.com/cantrell/archives/2012/07/all-about-chrome-flags.html

BenPleysier

Community Expert

Thank you Paula for your posts, these are very informative and gives us a glance at what is possible, now and into the near future. Although I have been following the posts, I have not joined in due to a chronic lack of time.

Just one slight comment, you know my views on Flex being of a single dimension, I feel that a full page layout is better left to Grid. That is not to say that I would criticise anyone for doing so (Flex for full page); the opposite is true, I have a lot of respect for those that are able to make it work, in a similar manner that I have great respect for those that have shown us how to use floats and clears for a page layout.

Having said that, we are still being handicapped by not having Sub-Grids (see Eric's Archived Thoughts: Subgrids Considered Essential). Unlike Eric, I do not feel that the lack of a subgrid should delay the emergence of Grid.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

pziecinaAuthor

Legend

Ben,

Thank you for joining in and your comments. I have read a number of articles similar to Eric's, and i fully agree with you, in that the lack of sub-grids will not hamper the implementation of css grid layouts.

As i have pointed out in a post, flexbox does solve specific problems that grid layouts cannot, (or other layout methods, easily) and i think it will also solve the example Eric has used. Give me a few days to look into it, but i am almost certain that i have alread used the form example as a use of flexbox for specific usage.

I also hope to update the flexbox-grid example to include IE10/11's implementation of css grids, but as usual one of Ms's browsers, (Edge) is causing problems, as it has support for the conditional rules (@support) . So i may just leave Edge support out for the moment, as hopefully it will be updated to the new syntax over the next 6 months or so anyway.

pziecinaAuthor

Legend

For those interested in css flexbox and css grid layouts, then there is an article on smashing magazine -

https://www.smashingmagazine.com/2016/11/css-grids-flexbox-and-box-alignment-our-new-system-for-web-layout/

Also as an example of a visual layout tool for flexbox -

https://flexbox.webflow.com/

Note: For those of you thinking that css grid layouts are nothing more than a grid layout system, similar to 960 grid (or similar), you could not be more wrong.

"For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements."

Try that with a bootstrap grid or 960 grid system, ( forget everything you thought you knew about css layouts).

Target usage for flexbox and css grid layouts -

Flexbox - for specific layout usage, (from navigation to full page)

css grid - for general layout usage, (from full page to specific sections of a page)

And don't forget dropping IE9 also means that multi-column layouts are possible, without hacks -

https://webdesign.tutsplus.com/articles/an-introduction-to-the-css3-multiple-column-layout-module--webdesign-4934

O

osgood_

Legend

pziecina wrote:
Hi All,
As promised, I am starting this discussion in response to the news that Bootstrap V4 will use flexbox as it's default for layouts, and will NOT support IE9.
See - https://forums.adobe.com/thread/2259854
Microsoft has now also dropped support for IE10. This means that unless you, your users, clients or company is paying a lot of money to Microsoft for extended support for IE10, no more updates will be released for that browser. This effectively means that over the next year it will also become an, 'also dead' browser.

There's always a period of 'no mans land' once a browsers support is dropped. Developers generally don't like to jump on the bandwagon too soon and they also don't want to miss the boat. It's never been a clear path as to when to start using new methods, it sort of creeps up on you.

pziecinaAuthor

Legend

osgood_ wrote:
There's always a period of 'no mans land' once a browsers support is dropped. Developers generally don't like to jump on the bandwagon too soon and they also don't want to miss the boat. It's never been a clear path as to when to start using new methods, it sort of creeps up on you.

Even though the possibility to use new methods may creep up on people, the tools to help us do so do not.

I have yet to see any program that is up-to-date on what is possible now, or even what was possible 2-3 years ago. Getting anything included in Dw, (or any other web dev prog) is like pushing a pebble up Vesuvius with my nose, time consuming and not very productive.

I know that these forums are not very well represented by users who know or use post IE8/9 code, and most do not even care until they wish to use them. Dw is so far behind just what is required by designers/developers now, that even trying to get it into the post IE8 era makes pushing a pebble up Vesuvius, look like the more productive alternative.

The fact that only yourself an I have replied to this discussion, also shows that even experienced users are unclear as to what is coming, or how best to support them

As Ben has said in the Bootstrap 4 post, even well known names are pushing for these new methods of layout, and as the new possibilities in design are also becoming better know, people will start asking why they are not available.

Think Dw 2017, all those complaints, and all those people who asked for the features that they are complaining about. If we don't decide what and how we want something included, then we could end up with the same 'half backed' features again.

O

osgood_

Legend

pziecina wrote:
osgood_ wrote:
There's always a period of 'no mans land' once a browsers support is dropped. Developers generally don't like to jump on the bandwagon too soon and they also don't want to miss the boat. It's never been a clear path as to when to start using new methods, it sort of creeps up on you.
Even though the possibility to use new methods may creep up on people, the tools to help us do so do not.
I have yet to see any program that is up-to-date on what is possible now, or even what was possible 2-3 years ago. Getting anything included in Dw, (or any other web dev prog) is like pushing a pebble up Vesuvius with my nose, time consuming and not very productive.
I know that these forums are not very well represented by users who know or use post IE8/9 code, and most do not even care until they wish to use them. Dw is so far behind just what is required by designers/developers now, that even trying to get it into the post IE8 era makes pushing a pebble up Vesuvius, look like the more productive alternative.
The fact that only yourself an I have replied to this discussion, also shows that even experienced users are unclear as to what is coming, or how best to support them
As Ben has said in the Bootstrap 4 post, even well known names are pushing for these new methods of layout, and as the new possibilities in design are also becoming better know, people will start asking why they are not available.
Think Dw 2017, all those complaints, and all those people who asked for the features that they are complaining about. If we don't decide what and how we want something included, then we could end up with the same 'half backed' features again.

I agree, the tools required to use these methods should be way ahead of the curve, which is a bit concerning when they are not even close. I mean we have DW with no support for Flexbox, Bootstrap some months away from supporting it by default and we are talking grid just around the corner - they haven't even considered or started writing support for that yet.

Probably why I write 99% of code manually as I can support what is useable when the time is right, not when some 3rd party player feels they want to give it to me.

Persoanally I'm not that concerned about the 'tools' as I only need a simple editor. My concern generally focuses on when the time comes to say goodbye to supporting old browsers given that a lot of people dont update them regularly or cant update them.

I cant update Safari on my Mac unless I update my operating system and the current version on my Mac doesn't support css grid. I might have this Mac for another 2-3 years and I don't intend to update the OS, that's a big concern because how many other out there are in the same boat. I know Safari is dying but it still needs some consideration.

O

osgood_

Legend

pziecina wrote:
with a visual creation tool if possible for css grid layouts.

That should be interesting given the optional approaches one can use to deploy css grid. Not exactly a simple 12 column grid is it.

pziecinaAuthor

Legend

osgood_ wrote:
pziecina wrote:
with a visual creation tool if possible for css grid layouts.
That should be interesting given the optional approaches one can use to deploy css grid. Not exactly a simple 12 column grid is it.

Maybe not a simple thing to do, but if Microsoft can do it for app development then so can Adobe Dw.

No excuses allowed for not doing this one.

pziecinaAuthor

Legend

pziecina wrote:
Dw and all web related products that we use, urgently require updating to meet the new challenges and possibilities of what is now possible and will become usable over the next year.

Just in case anyone is wondering about my position on this. I think that if Adobe, and Dw in particular don't do the above, then Dw is dead within the next 3 years.

ALsp

Legend

pziecina wrote:
pziecina wrote:
Dw and all web related products that we use, urgently require updating to meet the new challenges and possibilities of what is now possible and will become usable over the next year.
Just in case anyone is wondering about my position on this. I think that if Adobe, and Dw in particular don't do the above, then Dw is dead within the next 3 years.

I think this forum might be dead, but not Dreamweaver It's kind of fun sitting where we are, being able to take advantage of modern techniques in our tools. And I would say that since hundreds, if not thousands of our customers are still using Creative Suite versions of Dreamweaver, we will happily hit the next decade, and beyond, running... no matter how badly Adobe misses the mark.

The distant future of web design will probably not include Adobe. The company, in my opinion, lacks the vision to be truly compelling.

pziecinaAuthor

Legend

A little late Al, but happy new year .

ALsp wrote:
I think this forum might be dead, but not Dreamweaver It's kind of fun sitting where we are, being able to take advantage of modern techniques in our tools. And I would say that since hundreds, if not thousands of our customers are still using Creative Suite versions of Dreamweaver, we will happily hit the next decade, and beyond, running... no matter how badly Adobe misses the mark.
The distant future of web design will probably not include Adobe. The company, in my opinion, lacks the vision to be truly compelling.

I don't know about your customer base Al, but if it's mainly using Dw CS6 then I can see why your products are so popular. I am not saying that version after CS6 support anything more, just that that was the last version aimed at the 'future' in web development.

I've said it before, and I will say it again -

Adobe somewhere along the line abandoned html5, css3 and modern javascript api's, in favour of 'playing it safe', but as the song goes -

"time has caught up on you", (Adobe)

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded