Basically I am designing a jquery plugin to create circular presentation using vw to get rid of font size.
Everything works fine except for IE9, which renders the size of the font bigger than the other browser.
You can take a look at the example here:
http://www.rubenrizzi.com/circularslideshow/example-cell-encrypted/
Looks how bigger looks on IE9 than in the other browser.
Is there a way to handle this behavior with a polyfill, or a css trick to make IE9 respect the vw size?
Related
I know that imageset is the CSS equivalent to HTML's srcset attribute. However the current spec only supports the x pixel density units, not the w and h sizing units.
For example:
<img srcset="high.jpg 2000w, medium.jpg 1200w, low.jpg 800w">
If I resize my browser window to 400px wide Chrome first loads low.jpg. As I make the window wider it loads first medium.jpg then high.jpg. The point at which is switches is dependent on my display's pixel density so my retina Macbook loads the higher resolution images at half window size compared to my old Windows laptop.
How can I reproduce this behaviour for a CSS background image? I started doing it by specifying a bunch of min-width and max-resolution media queries but it quickly became a tangled mess. There must be a better way. I'm willing to use a JS polyfill if available.
There is unfortunately no easy way (yet?) to match srcset-w features in CSS.
You should read this great article on the topic: https://css-tricks.com/responsive-images-css/
CSS media query: pixel ratio
Or Picturefill
Is there a way to fix the Retina Blurry icons on cellphones without using the 2x sizing images hack?
I'm a Front-End developer and the Designer is not avaibable to giving me the icons of the Website at the double of its size.
So, I was wondering if there is any way to keep the original icons size and make it looks correctly on cellphones with Retina display.
Small pixel images are automatically enlarged by the browsers and the quality of the anti aliasing is depending on the rendering engine of the browser.
If you don't want to use the media queries #2 trick you could use svg icons instead as vector graphics are cristal sharp on every screen resolution and ppi.
Edit: As mentioned in the comment below you can disable antialias in browsers as described here: Disable antialising when scaling images
But that will not create eg a sharp round circle out of a 16 pixel graphic as the pixels will still be squared pixels (just enlarged)...
Checked different sites but no clear answer. Every time I get a new design in photoshop I try to match the pixel sizes into my css code. The browser then renders the size completely different than what I see in the photoshop file. I always get all the files with a 72pp resolution.
Is there a trick to match the pixel size of the photoshop to be the same as the CSS pixel size once rendered?
As a visual example...
Same typography, google font typography in this case.
Both have the value of 18px
Photoshop:
CSS render:
I don't know, mate. I translate perfectly all my psd into css with no problem.
Work ALWAYS with 72dpi images and be sure at preferences > Units & Rules > Units to mark both "rulers" and "type" as pixels
I'm designing a website and I've met with an interesting problem. I've designed my font-size for different media, using syntax like this:
#media all and (max-width:1100px) {html {font-size:109%;transition:1s;}}
Everything renders and looks fine when using Chrome. Now I've tried to check it on FireFox, just to be safe and I saw, that same CSS rule is being rendered larger in one zoom level (If is click ctrl+- once then ir renders correctly, if I reset zoom to normal state - text is bigger again).
Should I be creating CSS media rules for FF exclusively or there is some standard way to make this work?
CSS reset is applied and doesn't help in this situation.
The problem was that there was no base font-size on body. So the problem was fixed by simply setting this base size equal to 100%.
Thanks to Olly Hodgson who pointed this out.
I am working on adaptive site, and have made everything in em values. Despite that, I have differences between Chrome and Firefox in interpreting em. Website is dev.morodeer.ru/stroymoidom; problem is with the metal bar with icons. On the width of about 670px everything in Chrome is great, but Mozilla cuts the right edge (as width of centered wrapper is set to 90%). Also, with same width of browsers, metal bar in Firefox is smaller, which leads me to a thought, that Mozilla counts smaller font-size.
The em and ex units depend on the font and may be different for each element in the document.
quoted from: w3.org
maybe you use default fonts and firefox uses a different one as e.g. chrome does?
i'd suggest you to use px or % values instead of em for block-layout size values.
use em for font sizes, 1em = font size of the browser, 2em = 2* font size of the browser, 0.5 em = 0.5*font size of the browser .. and so on ;)
If you already knew that part: yes, firefox and chrome can have different font-sizes and em might influent your font size in a different way then.