#viewport

2022 s’annonce plutôt bien du côté du #CSS ! 🥳🥳🥳

Quelqu’un a déjà testé les color-function() ?
▻https://www.bram.us/2021/12/27/css-in-2022/#the-hotlist--color-functions

Quand ce sera bien opérationnel, ça me facilitera beaucoup les choses avec la personnalisation qu’on propose à nos clients.

J’espère aussi que les #viewport units mettront fin aux soucis #Safari sur #smartphone ☺
▻https://www.bram.us/2021/12/27/css-in-2022/#the-hotlist--viewport-units

Vous avez repéré quoi en particulier ?

#integration #integrationWeb #ui #HTML #responsive #variables

Corriger le problème de hauteur 100% (100vh) sur mobile - Alsacreations
▻https://www.alsacreations.com/astuce/lire/1831-corriger-le-probleme-de-hauteur-100vh-sur-mobile.html

2 contournements (CSS ou JS) du bogue de Safari sur le calcul du 100vh
(comme Microsoft avec IE6 il y a quelques années, Apple se sent suffisamment en position de force sur les navigateurs mobiles pour faire n’importe quoi et si possible non compatible avec les standards...)

#safari #100vh #viewport

Comprendre SVG viewBox et viewport
▻https://la-cascade.io/comprendre-svg-viewbox-et-viewport

Un des casse-tête de l’affichage « inline » du SVG : gérer la taille d’affichage pour ne pas le tronquer.
Une affaire d’attributs viewport , viewBox et preserveAspectRatio
Voir aussi :
▻https://la-cascade.io/comprendre-svg-viewbox
▻https://la-cascade.io/comprendre-svg-preserveaspectratio

#svg #viewport #viewBox #preserveAspectRatio #ratio #affichage

What you really wanted when you asked for viewport units
▻https://github.com/colingourlay/root-units

“Viewport units were an awesome idea. They let us set CSS properties to lengths that are proportion to the viewport’s width, height, or the min/max of the two. There’s a small caveat that’ll trip you up sooner or later though : they don’t play nicely with scroll bars.”

#viewport_units_fix_100vh_JavaScript_clevermark

Intersection Observer comes to Firefox
▻https://hacks.mozilla.org/2017/08/intersection-observer-comes-to-firefox

https://hacks.mozilla.org/files/2017/08/Blank-Diagram-Page-1-500x355.png

Knowing whether or not an element is #visible has traditionally been difficult on the Web. Most solutions listen for scroll and resize events, then use #DOM #APIs like getBoundingClientRect() to manually calculate where elements are relative to the #viewport. This usually works, but it’s inefficient and doesn’t take into account other ways in which an element’s visibility can change, such as a large image finally loading higher up on the page, which pushes everything else downward.
These techniques kill performance, drain batteries, and would be completely unnecessary if the browser could just notify us whenever an element’s visibility changed.
At its most basic, the #IntersectionObserver API looks something like:

let observer = new IntersectionObserver(handler);
observer.observe(target); // <-- Element to watch

IntersectionObserver is available by default in Edge 15, Chrome 51, and Firefox 55, which is due for release next week.

A polyfill is available which works effectively everywhere, albeit without the performance benefits of native implementations.
▻https://github.com/WICG/IntersectionObserver/tree/gh-pages/polyfill

SVG has more potential
▻https://madebymike.com.au/writing/svg-has-more-potential
#SVG_RWD

Viewport Sized Typography with Minimum and Maximum Sizes
▻https://css-tricks.com/snippets/sass/viewport-sized-typography-minimum-maximum-sizes

This Sass mixin makes use of media queries to define a minimum and maximum size for the font, in pixels. It also supports an optional parameter to serve as a fallback to browsers that don’t support viewport units.

#viewport_units_RWD_font_size_Sass_mixin_clevermarks

Viewport Unit Based Typography
▻http://zellwk.com/blog/viewport-based-typography
#viewport_units_typography_font-size_CSS_RWD

Gaunt Face | Matt Gaunt - What the #virtual #viewport?
▻https://gauntface.com/blog/2015/01/16/what-the-virtual-viewport

the idea is splitting the notion of “the viewport” into the “layout viewport” (where fixed position items are attached) and the “visual viewport” (What the users actually see) Tags: viewport virtual #layout #RWD

#SVG “symbol” a Good Choice for Icons
▻http://css-tricks.com/svg-symbol-good-choice-icons/#comment-1582036

Tags : SVG #symbol #icône #sprite #viewport

Advanced web typography: Responsive web typography » Blog » Elliot Jay Stocks
▻http://elliotjaystocks.com/blog/responsive-web-typography

“Viewport Units have a huge amount of promise for layout, I don’t think they really fit (sorry) for scaling type. The issue for me is relative proportion to body copy – which I believe you generally should not change away from whatever renders as ‘1em’.” Tags: #em #viewport #échelle

Comprendre le #Viewport dans le Web mobile - Alsacreations
►http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html

Le Viewport désigne schématiquement la surface de la fenêtre du navigateur. Cependant, la notion de viewport sur un appareil mobile est différente de celle sur un écran de bureau : sur mobile, le navigateur ne dispose pas de « fenêtre » réelle, ni de barres de défilement car tout est prévu pour naviguer de manière tactile.

Comprendre la notion de viewport est absolument indispensable dans un projet d’intégration de site web pour tablettes et smartphones, ou dans un esprit d’adaptation « #Responsive Web Design ».

Controlling text size in Safari for iOS without disabling user zoom | 456 Berea Street
▻http://www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom

-webkit-text-size-adjust:100% ;

#viewport #mobile

Comprendre le #Viewport dans le Web mobile - Alsacreations
►http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html

Pour résumer, Safari mobile sur iPhone 4 va afficher par défaut les pages web dans une fenêtre de 980px de large au sein des 320px de largeur qu’il croit avoir… bien qu’il en ait physiquement 640px.
Une image de 320px de large va, par conséquent, occuper par défaut 1/3 de la largeur de l’écran. Tordu, non ?

Mobile and Tablet #Viewport #Sizes with #screen DPI and size | i-Skool
▻http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes

The viewport metatag (Mobile web part 1) | David Calhoun’s Developer Blog
►http://davidbcalhoun.com/2010/viewport-metatag

#webapp #viewport

Philosophical Games: Customize Android Browser Scaling with target-densityDpi
►http://darkforge.blogspot.com/2010/05/customize-android-browser-scaling-with.html

#webapp #viewport #android

Choosing a viewport for iPad sites - Allen Pike
►http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites

“device-width is the width of the physical device (320px or 768px), not the width of the screen in the current orientation. As a consequence, you can get content rendered at 768px and blown up to 1024px.”

#webapp #ipad #viewport

responsivepx - find that tricky breakpoint
►http://responsivepx.com

Enter the url to your site - local or online: both work - and use the controls to adjust the #width and #height of your #viewport to find exact breakpoint widths in pixels. Then use that information in your #media_queries to create a #responsive_design.

jQuery.fracs
►http://larsjung.de/fracs

jQuery.fracs determines the #fraction of an HTML element that is currently in the #viewport, as well as the fraction it takes of the complete viewport and the fraction of the area that might possibly be #visible. It also provides the coordinates of the visible rectangle in document, element and viewport space.

#jQuery #plugin #canvas #fold #page #javascript

Mark Finkle’s Weblog » Perils of the viewport meta tag
►http://starkravingfinkle.org/blog/2010/01/perils-of-the-viewport-meta-tag

#interface #mobile #web #dev #taille #écran #viewport #largeur #hauteur #résolution #clevermarks