none
Expression Web 4 Sp2 CSS3 draft Flexbox

    Question

  • Could someone please help regarding - for example - display:flex; is not compatible when it is supposed to work in ie10 and edge. Is there some intellisense upgrade I am missing ? All the Flex stuff does not work as advertised.
    Thursday, September 22, 2016 6:55 PM

Answers

  • By default the Flex Items in the <p> tags should show in 1 row and a border should line around the edge of the box. What you end up with is a border above the items and the items are stacked multi-line. The spec just does not work and to paraphrase the CaniuseSite says ie11 works partially, ie13 14 (Edge) is supported. The result does not get any better with 11 12 or 13 and it looks like Firefox and Chrome are the main adopters. I was wondering if my software was not up to date or something like a setting, I am set to Author in CSS3 Draft.

    Your "software" (EW) has nothing to do with it. Microsoft announced in July 2011 that development of the Expression Studio programs, including EW, was being brought to an end, and announced the release of the free version EW4 SP2a that you are presumably using. That means that EW's CSS support is frozen at the level of the CSS3 draft as it existed at that time, more than five years ago. Consequently, neither its Intellisense nor its syntax/compatibility checking, nor its design view, understand flexbox. So, it may display compatibility messages when you use that markup. No problem—simply ignore the messages; nothing will happen. There are no settings you can use to change that.

    So does this stuff work or not??

    Now, whether it displays properly in a particular browser, again, has nothing to do with the development tool used. That is 100% predicated upon the browser's support for that feature. And, as usual, it appears that IE and successors are laggard in the completeness of their support. That is not the fault of EW, and there is nothing that you can do, no setting you can change, in EW to change that.

    So, use EW, enter the code that should work, ignore any compatibility messages, and test in your target browsers and you'll be OK.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Marked as answer by NDSN Saturday, September 24, 2016 4:27 AM
    Friday, September 23, 2016 4:02 AM

All replies

  • Your post is not clear.  What do you mean by "is not compatible"?  Since you reference intellisense I'm wondering if you are talking about EW's compatibility reports, but you haven't said that.  Then you talk about it not working in IE10 and Edge, which has nothing to do with EW and everything to do with the browsers themselves, if they understand it, and if you have done the markup correctly.  display:flex is not universally implemented the same way, prefix-free, or bug free: http://caniuse.com/#feat=flexbox and https://css-tricks.com/using-flexbox/

    I will say that the last release of EW was many years ago, so if you are talking about compatibility reports, don't expect it to know anything newer than that. Frankly, all that matters is what works in your actual browser tests.  Just ignore anything EW complains about because it's newer than EW is.



    Kathleen Wilber
    BrightWillow - Asp.Net Applications


    • Edited by KathyW2 Thursday, September 22, 2016 7:54 PM
    Thursday, September 22, 2016 7:53 PM
  • The title of the post is "Expression Web 4 SP2 CSS3 Draft Flexbox. I have been reading "Beginning CSS3
    Copyright © 2012 by David Powers" I follow the instructions and the Flexbox layout concept looks like a good tool. However, as soon as you enter the following example from the book in Expression Web 4:

    <style>
    #container {
    display: flex;............................the flex prefix is not compatible with the schema... error appears.
    border: 1px solid #000;
    width: 400px;
    }
    p {
    margin: 10px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    }
    </style>
    <div id = "container">
    <p> Flex item 1</p>
    <p> Flex item 2</p>
    <p> Flex item 3</p>
    <p> Flex item 4</p>
    </div>

    By default the Flex Items in the <p> tags should show in 1 row and a border should line around the edge of the box. What you end up with is a border above the items and the items are stacked multi-line. The spec just does not work and to paraphrase the CaniuseSite says ie11 works partially, ie13 14 (Edge) is supported. The result does not get any better with 11 12 or 13 and it looks like Firefox and Chrome are the main adopters. I was wondering if my software was not up to date or something like a setting, I am set to Author in CSS3 Draft.

    So does this stuff work or not??

    Thursday, September 22, 2016 9:06 PM
  • EW does not understand flex.  As I told you, the last release was years ago.  Ignore warnings that relate to new things EW doesn't know about.

    As to flex working in browsers, as I said, that has nothing to do with EW and everything to do with browsers and how they expect flex to be marked up, or not, and how they support flex, or not.  See my previous two links for examples of that.

    I can't comment about a book you are reading without having that book.  I can say that using only the markup you show, the paragraphs are side by side, with a border around the containing div, in latest versions of Chrome, Firefox, IE, Edge.  They div is fixed in total width.

    If you see something different, perhaps you have other styles in the page that are changing the effect.



    Kathleen Wilber
    BrightWillow - Asp.Net Applications

    Thursday, September 22, 2016 10:41 PM
  • By default the Flex Items in the <p> tags should show in 1 row and a border should line around the edge of the box. What you end up with is a border above the items and the items are stacked multi-line. The spec just does not work and to paraphrase the CaniuseSite says ie11 works partially, ie13 14 (Edge) is supported. The result does not get any better with 11 12 or 13 and it looks like Firefox and Chrome are the main adopters. I was wondering if my software was not up to date or something like a setting, I am set to Author in CSS3 Draft.

    Your "software" (EW) has nothing to do with it. Microsoft announced in July 2011 that development of the Expression Studio programs, including EW, was being brought to an end, and announced the release of the free version EW4 SP2a that you are presumably using. That means that EW's CSS support is frozen at the level of the CSS3 draft as it existed at that time, more than five years ago. Consequently, neither its Intellisense nor its syntax/compatibility checking, nor its design view, understand flexbox. So, it may display compatibility messages when you use that markup. No problem—simply ignore the messages; nothing will happen. There are no settings you can use to change that.

    So does this stuff work or not??

    Now, whether it displays properly in a particular browser, again, has nothing to do with the development tool used. That is 100% predicated upon the browser's support for that feature. And, as usual, it appears that IE and successors are laggard in the completeness of their support. That is not the fault of EW, and there is nothing that you can do, no setting you can change, in EW to change that.

    So, use EW, enter the code that should work, ignore any compatibility messages, and test in your target browsers and you'll be OK.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Marked as answer by NDSN Saturday, September 24, 2016 4:27 AM
    Friday, September 23, 2016 4:02 AM
  • EW4 complains about flex-box, but it works. You will not get attributes etc. to show in the intellisense but it does work. I even had the items show stacked in design view, but when I ran in ie11 they presented as inline.
    Wednesday, April 19, 2017 2:29 AM
  • Ignore the complaints. It works. Sure wish they did not end EW4. Visual Studio does not give you a design view. I wonder why?
    Wednesday, April 19, 2017 2:32 AM