Re: Media queries in <switch> elements

I would like to get a clarification to the sentence "All others will be
bypassed and therefore not rendered." in the switch element.

What does "will be bypassed" mean?

This question was actually asked already years ago:
http://lists.w3.org/Archives/Public/www-svg/2005Jul/0042.html - without a
proper answer.

I tested the bypassed elements on browsers:

 - the bypassed elements seem to be in the DOM tree
 - CSS selectors seem to always match them (e.g., the :first-child selector)
 - content (image href) seems to always be loaded
 - animations are run
 - scripts are run
 - events (onmouseover, what about others?) are not fired (because the
element is not rendered?)
 - a use element referencing a "not-rendered" element seems not to render it
 - bounding boxes are inconsistent between browser
 - bounding boxes do not contribute to the parent bounding box

Looks like only the rendering is affected. There isn't really any
"bypassing". Is that true?

Cheers,
Kari





2014-03-14 9:59 GMT+02:00 Kari Pihkala <kari.pihkala@gmail.com>:

> Hi,
>
> The postpone attribute in Resource Priorities checks that the display
> attribute isn't 'none' and "the bounding box of the element is inside the
> User Agent's interpretation of the Document's viewport".
>
> https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/ResourcePriorities_for_SVG
>
> The switch element defines: ".. processes and renders the first child for
> which these attributes evaluate to true. All others will be bypassed and
> therefore not rendered."
> https://svgwg.org/svg2-draft/struct.html#SwitchElement
>
> Does the switch element "not rendered" mean that the bounding box of the
> element is not inside the viewport? In that case, resource priorities will
> work nicely.
>
> What is the bounding box of a "not rendered" element? I tested Safari and
> Firefox on Mac and they seem to disagree. Safari gives (0,0,0,0) while FF
> gives real coordinates or an exception.
>
> Is bounding box (0,0,0,0) inside the viewport? Is <image width="0"
> height="0" xlink:href="huge.png" postpone="true"/> loaded?
>
> Anyway, this would be nice:
>
> <image xlink:href="big.png" media="screen and (min-width: 10em)"
> postpone="true"/>
> <image xlink:href="small.png" media="screen and (max-width: 10em)"
> postpone="true"/>
>
> Cheers,
> Kari
>
>
> 2014-03-14 8:11 GMT+02:00 Satoru Takagi <sa-takagi@kddi.com>:
>
> Hi,
>>
>> I wonder that the current implementations can offer the similar effect,
>> although it
>> does not use 'switch'.
>>
>> https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Zoom_feature_for_media_queries#min.
>> 2Fmax-width.2Fheight_properties_in_CSS_Media_Queries<https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Zoom_feature_for_media_queries#min.2Fmax-width.2Fheight_properties_in_CSS_Media_Queries>
>> Of course, it does not carry out conditional dynamic resource loading.
>> Then, we had a discussion on dynamic loading based on the document which
>> you pointed out. http://www.w3.org/2013/06/03-svg-minutes.html#item18
>>
>> In the meantime, the editor's draft of resource priorities was published.
>> http://www.w3.org/TR/resource-priorities/
>>
>> Since it had roughly aligned with the argument on previous our
>> discussion, discussion
>> regarding that is going.
>>
>> https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/ResourcePriorities_for_SVG
>> http://www.w3.org/2013/11/14-svg-minutes.html#item02
>>
>> http://www.w3.org/Search/Mail/Public/search?type-index=public-web-perf&index-type=t&
>> keywords=svg&search=Search<http://www.w3.org/Search/Mail/Public/search?type-index=public-web-perf&index-type=t&keywords=svg&search=Search>
>>
>> I have not made reference about 'switch' element because our use case was
>> not only choosing only one resource in them. Our use case is being able to
>> choose some of divided fragments of graphics based on the conditions by
>> zooming and panning.
>> http://lists.w3.org/Archives/Public/public-web-perf/2013Sep/0087.html
>> It is like introducing it to this page.
>> http://www.microsoft.com/web/solutions/zoomit.aspx
>> The source code by SVG may be such a thing.
>> http://lists.w3.org/Archives/Public/public-web-perf/2013Sep/0103.html
>> I wonder that it is a superordinate concept that were examined as
>> responsive/adaptive images until now.
>>
>> Regards,
>>
>> Satoru
>>
>>
>> >
>> >
>> > That sounds like a nice idea! Also, it would be nice to have a way to
>> > control loading of media so that those image and video elements which
>> are
>> > not displayed are not fetched. I believe the current browsers fetch all
>> > even if they are not displayed.
>> >
>> > <switch>
>> >   <!-- some way not to load big.png if small.png is displayed would be
>> nice
>> > for mobile phones -->
>> >   <image xlink:href="big.png" media="screen and (max-width: 10em)"/>
>> >   <image xlink:href="small.png"/>
>> > </switch>
>> >
>> > This section doesn't mention the poor switch element at all:
>> >
>> http://www.w3.org/Graphics/SVG/WG/wiki/Proposals/IFrame_Like_Syntax#5.10_Specifying_
>> whether_external_resources_are_required_for_proper_rendering
>> >
>> > Cheers,
>> > Kari
>> >
>> >
>> >
>> > 2014-03-06 17:25 GMT+02:00 Manuel Strehl <svg@manuel-strehl.de>:
>> >
>> > > Ah, the correct link to Robin's presentation:
>> > >
>> > > http://berjon.com/presentations/20130910-ricg-switch/
>> > >
>> > > Thanks, David, for pointing it out!
>> > >
>> > > Manuel
>> > >
>> > > Am 6.3.2014 11:15, schrieb Manuel Strehl:
>> > >
>> > >  Hi,
>> > >>
>> > >> recently several posts and tutorials sing the song of "responsive
>> > >> SVG", e.g. Clown Car,
>> > >> <http://coding.smashingmagazine.com/2013/06/02/clown-car-technique-
>> > >> solving-for-adaptive-images-in-responsive-web-design/>,
>> > >> Responsive Icons, <http://responsiveicons.co.uk/> or more recently,
>> > >> <
>> http://coding.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/
>> > >> >.
>> > >>
>> > >> In all these articles some combination of CSS media queries and JS
>> are
>> > >> leveraged. The humble <switch> element is never even mentioned. And
>> > >> that's because it's useless here. I've found this brainstorming:
>> > >>
>> > >> http://www.w3.org/Graphics/SVG/WG/wiki/Proposals/IFrame_
>> > >> Like_Syntax#5.9.2_The_.27switch.27_element
>> > >>
>> > >> and this presentation from Robin Berjon:
>> > >>
>> > >>
>> http://coding.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/
>> > >>
>> > >> where a "media" attribute is mentioned, and I'd like to ask, if there
>> > >> are any ongoing discussions towards adding it. It may be useful
>> inside
>> > >> a <switch> element to complete requiredFeature and requiredExtension
>> > >> and mirror <video> in HTML, or even stand-alone, on arbitrary
>> > >> rendering elements.
>> > >>
>> > >> The advantage is straight-forward in-markup ways to declare, which
>> > >> parts of the image to render, and which to discard in some viewing
>> > >> circumstances. Since evaluation of media queries is already
>> > >> implemented in browsers and the result is basically a simple "display
>> > >> full"/"display none" switch, I'd suspect implementations to be not
>> > >> completely insanely hard.
>> > >>
>> > >> Reference SVG of what I'm talking about:
>> > >>
>> > >> <svg>
>> > >>
>> > >>   <!-- inside switch element: -->
>> > >>   <switch>
>> > >>     <rect media="screen and (max-width: 1em)"/>
>> > >>     <rect media="print" />
>> > >>   </switch>
>> > >>
>> > >>   <!-- or standalone: -->
>> > >>   <rect media="print" />
>> > >>
>> > >> </svg>
>> > >>
>> > >> Cheers,
>> > >> Manuel
>> > >>
>> > >
>> > >
>> >
>> >
>> >
>> >
>>
>>
>