Leapcell
Posted on
• Edited on
We all know that CSS used to be the most challenging part of web development. However, it has become even harder nowadays.
You wouldn’t believe it, but now CSS can define properties, do the math, and even directly get the window size! This article will show you how to do it.
Define Property
The @property rule is a new feature in CSS that allows developers to create custom properties and set their types, inheritance, and initial values. Using this feature, we can read specific values and pass them to custom properties.
In the example below, we define two custom properties, --w_raw and --h_raw, representing the window’s width and height respectively:
@property --w_raw {
syntax: '<length>';
inherits: true;
initial-value: 100vw;
}
@property --h_raw {
syntax: '<length>';
inherits: true;
initial-value: 100vh;
}
Enter fullscreen mode
Exit fullscreen mode
-
syntax: '<length>'specifies that the property’s type is a length. -
inherits: trueindicates that the property can be inherited. -
initial-valuesets the property’s initial value to100vwand100vh, which are the viewport’s width and height.
Removing Units
Now, we have obtained the window width and height values, but they still include units. How can we remove the units to get pure numeric values? It’s a matter of math, so we need to use the mathematical tools in CSS: atan2(y, x) and tan().
- The
atan2(y, x)function returns the angle (in radians) from the x-axis to the point (x, y). - The
tan()function calculates the tangent of a given angle.
Combining these, we can obtain the pure numeric values. Here, we pass var(--w_raw) and 1px as parameters to calculate the angle of the width and then convert it to a number. In this way, we convert the width and height to unitless values and store them in :root‘s variables.
:root {
--w: tan(atan2(var(--w_raw), 1px));
--h: tan(atan2(var(--h_raw), 1px));
}
Enter fullscreen mode
Exit fullscreen mode
Displaying the Numbers
Now that the numeric values are stored in CSS, how do we display them? It’s the counter that counts!
body::before {
content: counter(w) 'x' counter(h);
counter-reset: h var(--h) w var(--w);
}
Enter fullscreen mode
Exit fullscreen mode
We create a ::before pseudo-element on the body to display the CSS content.
-
counter-resetinitializes the countershandwand sets their values tovar(--h)andvar(--w). -
content: counter(w) "x" counter(h);displays the width and height counter, in the format «width x height».
Done!
Now you have a window size indicator implemented purely in CSS.
The browser will update --w and --h in real time and display them on the page. The entire process is entirely JavaScript-free.
You can click here to try the online demo.
References:
Temani Afif — https://css-tip.com/screen-dimension/
- Previous CSS Tip
- Next CSS Tip
Get the screen width and height as pixel values using a few lines of CSS.
- Powered by
@property& trigonometric functions - Unitless values so you can easily use them inside any formula
- Updates on screen resize (No need for JavaScript)
@property --_w {
syntax: '<length>';
inherits: true;
initial-value: 100vw;
}
@property --_h {
syntax: '<length>';
inherits: true;
initial-value: 100vh;
}
:root {
--w: tan(atan2(var(--_w),1px)); /* screen width */
--h: tan(atan2(var(--_h),1px)); /* screen height*/
/* The result is an integer without unit */
}Resize the below demo to see how the values update in real-time:
See the Pen
Screen width/Screen height (CSS-only) by Temani Afif (@t_afif)
on CodePen.
More detail: dev.to/janeori/css-type-casting-to-numeric-tanatan2-scalars-582j
You can also get the width/height of any element using a different method
More CSS Tips
-
Calculate the scroll progress of the page
A few lines of CSS to get the scroll progress of the page inside a CSS variable.
-
Manual typography using Scroll-driven animations
Use a range slider to manually adjust the font-size of your website (100% CSS).
-
Inverted border-radius using CSS mask
One property and 4 gradients to invert the corner of any element with a radius.
-
Circular progress using scroll-driven animations
Transforming the native progress element into a circular one using scroll-driven animations.
It is not possible to get the height of the screen from CSS. However, using since CSS3 you can use media queries to control the display of the template as per the resolution. If you want to code on the basis of height using media queries, you can define style-sheet and call it like this.
How do I calculate window size in CSS?
For example, height: calc( 100vh – 50px ); which would equate to “the window height less 50px”. In this case I suggest you to use vh (hundreds of viewport height): If you set height: 100vh; it would take 100% height of each screen. If I use 100%, which would also take 100% of each screen.
How do I find my screen size?
Use window. innerWidth and window. innerHeight to get the current screen size of a page.
How do I fix my screen height in CSS?
CSS Make A Div Full Screen height:100% Before setting the height property to 100% inside . height:100vh. The . position:absolute. You can also use position absolute as well as setting all the viewport sides (top, right, bottom, left) to 0px will make the div takes the full screen.
How do I find my screen width and height?
Answer: Use the window. screen Object You can simply use the width and height property of the window. screen object to get the resolution of the screen (i.e. width and height of the screen).
How do I make a div fit the height of my screen?
If you want to set the height of a <div> or any element, you should set the height of <body> and <html> to 100% too.Such units are called viewport-percentage lengths and are relative to the size of the initial containing block. Viewport-Height is called vh . Viewport-Width is called vw .
What is the window height from floor?
A standard window is set about three feet from the floor. This is the best height to leave room for furniture placement. The standard window height is six feet and eight inches. But if your home has a taller ceiling than the typical eight feet, you can make those windows a lot higher.
What is scrollHeight?
The scrollHeight property returns the entire height of an element in pixels, including padding, but not the border, scrollbar or margin. Tip: To add scrollbars to an element, use the CSS overflow property.
How do you calculate in CSS?
The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length> , <frequency> , <angle> , <time> , <percentage> , <number> , or <integer> is allowed.
How do I know my screen pixel size?
How can I check screen resolution? Type Display Settings in the search bar from the Start Menu in the lower left corner of your screen. Click to open. Scroll down to the Scale and Layout section and look for the resolution drop-down box. Make note of the resolution listed.
How do I find my screen size in console?
Anytime you want to check the window size, run winSize() . Note that you can use the up/down arrow keys in Console to scroll thru the commands you have used.
How do I get the height of my screen in HTML?
For height: $(document). height() // Full height of the HTML page, including content you have to // scroll to see $(window). height() // The current document’s viewport height, minus taskbars, etc.
How do you adjust screen height?
Adjust the monitor height so that the top of the screen is at—or slightly below—eye level. Your eyes should look slightly downward when viewing the middle of the screen. Position the monitor at least 20 inches (51 cm) from your eyes—about an arm’s length distance. If your screen is larger, add more viewing distance.
How do I set my height to 100 screen?
If you want to set the height of a <div> or any element, you should set the height of <body> and <html> to 100% too.Such units are called viewport-percentage lengths and are relative to the size of the initial containing block. Viewport-Height is called vh . Viewport-Width is called vw .
How do I make my Web page fit the screen?
To create a responsive website, add the following <meta> tag to all your web pages: <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <img src=”img_girl.jpg” style=”width:100%;”> <img src=”img_girl.jpg” style=”max-width:100%;height:auto;”> <picture> <h1 style=”font-size:10vw”>Hello World</h1>.
What is normal screen size?
Most modern monitor screen sizes range from less than 21 inches to well over 30 and are practically priced for your needs.
How do I find my screen width and height in unity?
get screen width and height in world size Vector3 tmpPos = Camera. main. WorldToScreenPoint (transform. position); if (tmpPos. x > Screen. width ) { Debug. Log (“Destroy”); Destroy(gameObject); }.
Can I use screen width?
The width property returns the total width of the user’s screen, in pixels. Tip: Use the height property to get the total height of the user’s screen.
What is meant by height 100%?
height: 100% gives the element 100% height of its parent container. height: auto means the element height will depend upon the height of its children.
How do I fit a div to a page?
Using inline-block property: Use display: inline-block property to set a div size according to its content. each web page. Output: Using fit-content property in width and height: In this method, we set the width and height property to fit-content value.
What is height fit-content?
The fit-content behaves as fit-content(stretch) . In practice this means that the box will use the available space, but never more than max-content . When used as laid out box size for width , height , min-width , min-height , max-width and max-height the maximum and minimum sizes refer to the content size.
A way to calculate the viewport’s width and height without JavaScript, by way of Temani Afif over at CSS Tip:
@property --_w {
syntax: '<length>';
inherits: true;
initial-value: 100vw;
}
@property --_h {
syntax: '<length>';
inherits: true;
initial-value: 100vh;
}
:root {
--w: tan(atan2(var(--_w),1px)); /* screen width */
--h: tan(atan2(var(--_h),1px)); /* screen height*/
/* The result is an integer without unit */
}The snippet is a hat tip to Jane Ori who originally published it and wrote an explainer for how it works. I’m no math whiz, but I do recognize the tan() function from my high school days as a method for calculating a ratio for the opposite and adjacent sides of a right triangle based on a provided angle.
In other words, tan() divides the triangle’s height (opposite) by the width (adjacent) to produce an angle. All we do is supply it with the angle, i.e. tan( <angle> ).
Why the heck would we do that when we have calc(), right? The problem is that calc() is unable to do the type of division we need. So, what Jane Ori cleverly did was nest the atan() function inside: tan(atan()).
The cleverness is that atan() is the inverse of tan() where we supply it with a ratio dividing the width and height values: atan( <ratio> ). This way, the triangle’s width and height are taken as separate arguments that are calculated before the tan() function does its thing, giving it what it needs to calculate the tangent of an angle.
I’ll let Jane take it home:
So what this trick is doing is kind of silly in most worlds (and probably why nobody pointed it out sooner) because we’re using two trig functions instead of division that
calc()implementations can’t do yet.
atan2( Height, Width )=angle
tan( angle )=Height / Width
tan( atan2( Height, Width ) )=Height / WidthJane Ori, “CSS Type Casting to Numeric: tan(atan2()) Scalars”
You’ll want to check out Jane’s full explainer for another example that calculates an element’s font-size value.
- How do you screen width in CSS?
- How do I get the current window size in CSS?
- How do I know the width of my monitor?
- How do I find my screen resolution in CSS?
- How do you know the width of a website?
- What is screen width?
- How do you find the width of a DOM element?
- How do we get the width of the web page in Javascript?
- How do I make my website fit my screen size in HTML?
- What size is full screen?
- What is box sizing CSS?
- How do I make my page full height in CSS?
How do you screen width in CSS?
Use the CSS3 Viewport-percentage feature. Assuming you want the body width size to be a ratio of the browser’s view port. I added a border so you can see the body resize as you change your browser width or height. I used a ratio of 90% of the view-port size.
How do I get the current window size in CSS?
Use window. innerWidth and window. innerHeight to get the current screen size of a page.
How do I know the width of my monitor?
Answer: Use the window. screen Object
You can simply use the width and height property of the window. screen object to get the resolution of the screen (i.e. width and height of the screen).
How do I find my screen resolution in CSS?
To get the screen resolution you need to use Javascript instead of CSS: Use screen. height for height and screen. width for width.
How do you know the width of a website?
Find the content area and click to focus on it. Back in the bottom window, click Box Model on the right. The width and height will be shown. The first number is the width.
What is screen width?
Description. A number. The total width of the user’s screen in pixels.
How do you find the width of a DOM element?
Use offsetWidth & offsetHeight properties of the DOM element to get its the width and height.
How do we get the width of the web page in Javascript?
The web page size
const pageWidth = document. documentElement. scrollWidth; const pageHeight = document.
How do I make my website fit my screen size in HTML?
You should set body and html to position:fixed; , and then set right: , left: , top: , and bottom: to 0; . That way, even if content overflows it will not extend past the limits of the viewport. Caveat: Using this method, if the user makes their window smaller, content will be cut off.
What size is full screen?
Full Screen (1920 x 1080)
Full screen is a common aspect ratio shared by narrative films, documentaries, and even online video.
What is box sizing CSS?
With the CSS box-sizing Property
The box-sizing property allows us to include the padding and border in an element’s total width and height. If you set box-sizing: border-box; on an element, padding and border are included in the width and height: Both divs are the same size now!
How do I make my page full height in CSS?
For a responsive full page height, set the body element min-height to 100vh. If you set a page width, choose 100% over 100vw to avoid surprise horizontal scrollbars.