column-width/column-count, too, because column layouts are used in Wikimedia sites’ CSS frequently. Out of my personal experience in working with TemplateStyles, having flexbox prefixed properties supported as soon as possible is probably the most crucial out of this. If my browser matrix is wrong, you can probably edit it to get it right. webkit-transition-timing-function : value ĭon’t know which are not supported in TemplateStyles, I opted to check all of them. webkit-animation-timing-function : value webkit-animation-iteration-count : value P7061 Autoprefixer prefixed properties for Wikimedia sites T188198: Enable TemplateStyles on ruwiki on Mentioned Here T228604: Clean up party of Mediawiki:Common.css at Wikimania 2019 T192612: Design feedback for refined main page of Russian Wikipedia T138622: Help community migrate away from legacy Main page special casing T195946: Allow editors to style main page's differently from other pages for performance and to allow creativity (e.g.
RCSSS7775ef2d9c2d: WIP: Support vendor prefixes T205787: TemplateStyles throws inaccurate errors without providing a save-anyway option T203416: Document which CSS properties are supported in TemplateStyles T243996: Remove MFMobileMainPageCss from MobileFrontend T248416: Drop MediaWiki:Mobile.css and MediaWiki:Mobile.js in favor of TemplateStyles T250957: TemplateStyles should tell users not to use vendor prefixes when it sees one This particular example uses the CSS min-height, max-height and min-width media query properties.Mentioned In T311381: Vendor prefixes for column-width are not supported When the min-height property matches the viewport space defined via media queries, regions which are The sticky regions get un-fixed as the height of the viewport is limited or the orientation The following example uses HTML and CSS to un-fix sticky headers / footers.
for tablets depending on the portrait or landscape positionĮxamples Example 1: Un-fix sticky headers / footers in HTML and CSS Define other sticky regions using media query min-width and max-height properties for specific viewport sizes, so they get fixed or un-fixed depending on.Define the first sticky regions using media query min-height properties, so they get fixed or un-fixed depending on the available space.The basic approach for un-fixing sticky headers / footers is to: To scroll down to be able to see their focus position, which is a major inconvenience. Same way the visible focus can disappear behind a sticky footer, so users would need To be able to see the focus, something they may not necessarily be aware of. To reach interactive elements higher up on the page will often mean that the focusīecomes invisible once it moves behind the sticky header. With a fixed header is that once the page has started to scroll, tabbing backwards The problem for keyboard users tabbing through a page Space when users prefer different reading and zoom preferences or when using landscapeīe aware that sticky regions can create disadvantages for keyboard users and should Leave only a small part of the screen for the display of page content.ĭisabling, or un-fixing sticky regions, is an effective way to allow for enough available Regions may block a big portion of the screen: the height of the sticky region may Mobile devices in landscape orientation or when zooming in on the desktop, sticky On the desktop and on mobile devices in portrait orientation. In terms of content visibility, this is often not a problem Sticky regions always stay visible in the viewport while the other content will disappear
This is done by using min-height, max-height and min-width media queries techniques that adapt to the available space of the viewport. The objective of this technique is to be able to present content with sticky headersĪnd footers when there is enough space. This technique relates to Success Criterion 1.4.10: Reflow (Advisory). This technique is applicable to Cascading Style Sheet / HTML technologies. The Applicability section explains the scope of the technique,Īnd the presence of techniques for a specific technology does not imply that the technologyĬan be used in all situations to create content that meets WCAG 2.1. They relate to the normative WCAG 2.1 success criteria. See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how Using media queries to un-fixing sticky headers / footers Important Information about Techniques C34: Using media queries to un-fixing sticky headers / footers
0 kommentar(er)
