CSS of the future: distance to the eyes
At Habré there are often a variety of "insights" regarding new technologies. These are usually experimental technologies that are already being used by some companies and are slowly reaching a wide market. Today, I want to share with you an idea that came to my mind, but it will not be realized soon, but it is already on the surface.
Disclaimer: I do not pretend to the originality of the idea.
Every day in web development, the problem of adaptive design is getting wider. With the widespread use of smartphones, tablets, smart TVs and other devices, it has become increasingly difficult to solve the problem of conveying content to the user. Adaptive layout is a great way to solve a new problem using old tools. Today I propose a completely new approach. New unit of measurement in CSS: the angular distance to the eye.
')
So, many of the picture have already guessed what it was about. Explaining in a simple way, this unit changes the size of an element (or font) in direct proportion to the distance of the screen from the eyes. How is this useful?
At the moment, most mobile devices have the technical ability to calculate the distance to the eyes using the front camera. Monitors and televisions can do the same with webcams or kinect-like devices. So it's up to the code and browsers. Well, a smartphone from amazon and at all brought this technology to the absolute, and even measures the movement of the user's gaze.
As I see it. The unit of measurement can be called, for example, vad (visual angle degrees). Then here's an example of adaptive layout:
Here, in addition to demonstrating the use of vad, I also introduced a new max-font-size property: it is necessary if the user is too far from the screen, and further increasing the size will spoil the layout.
Also, of course, for content management depending on the screen size, you can add and
Waiting for your comments on my fantasies.
Disclaimer: I do not pretend to the originality of the idea.
Every day in web development, the problem of adaptive design is getting wider. With the widespread use of smartphones, tablets, smart TVs and other devices, it has become increasingly difficult to solve the problem of conveying content to the user. Adaptive layout is a great way to solve a new problem using old tools. Today I propose a completely new approach. New unit of measurement in CSS: the angular distance to the eye.
')
So, many of the picture have already guessed what it was about. Explaining in a simple way, this unit changes the size of an element (or font) in direct proportion to the distance of the screen from the eyes. How is this useful?
- Full independence from the device. Forget pixel density and screen sizes
- Physiology for humans. The user sees the content uniformly on different screens, at different distances from the screen, etc.
- Accessibility. It is much easier to manage the contents of people with poor eyesight, or in uncomfortable conditions (on the go)
Technical feasibility
At the moment, most mobile devices have the technical ability to calculate the distance to the eyes using the front camera. Monitors and televisions can do the same with webcams or kinect-like devices. So it's up to the code and browsers. Well, a smartphone from amazon and at all brought this technology to the absolute, and even measures the movement of the user's gaze.
Implementation as an API
As I see it. The unit of measurement can be called, for example, vad (visual angle degrees). Then here's an example of adaptive layout:
p { font-size: 1.5vad; max-font-size: 3cm; width: 20vad; max-width: 100%; } Here, in addition to demonstrating the use of vad, I also introduced a new max-font-size property: it is necessary if the user is too far from the screen, and further increasing the size will spoil the layout.
Also, of course, for content management depending on the screen size, you can add and
@mediarequests ... And also through vad .
Waiting for your comments on my fantasies.
Source: https://habr.com/ru/post/256069/
All Articles