Have a following problem. When I created page, I didn't notice that customized all content to the scale of 25%. So when I return page to normal scale it looks like a mess. So I'm wondering, is there any way to make everything look the same as on 25% scale or should I manually change everything in CSS?
When tackling an issue, it's important to identify the source. In your case, it was user error - and the fix would be going back and adjusting your stylesheet for native scaling.
Resorting to a scale factor would just be duct taping it, but for the sake of completeness, the zoom CSS property does what you wish, with a huge asterisk: It's non-standard, it's not supported in Firefox, and you shouldn't use it.
Related
So, after a few days of research, I'm forced to write this question:
What is the best way to work with compass sprites ?
Using layout horizontal or vertical seems to work fine for me. But I'm not able to work with smart layout. I always face the same problem: when zooming the page (in or out) at some points, I can see a bit of a sibling sprite on my sprite. Its get overlapped.
Seems the only way to make it work is adding some space through compass sprite's configuration, but this is not supported with smart layout.
So, what to do ?
Use always an horizontal or vertical layout ? What is the performance impact ?
I mean, the size of the generated images will be very large as the number of sprites grows. And on compass's documentation they said that this can cause performance issues...
But using smart layout its totally useless for me because of this overlapping issues.
What do you people do usually ?
Its ok to go with horizontal or vertical layouts all the time and have the generated file growing vertical or horizontally without being in an optimal way ?
Asking this cause we gonna move soon to mobile and perform is a key point.
Thanks a lot in advance !
The limiting factor on the image size is total amount of pixels so if you put them in the row instead of square it should be ok. Also, if design allows, you can add to each sprite border with the element border and background so it will look ok.
But be aware that sprites have much less sense with upcoming internet standards. For example SPDY:
Don't use CSS sprites with external stylesheets - Resources in
external stylesheets are obviously only discovered after the external
stylesheet has been downloaded, and only once the rule matches an
element. The advantage they provide of reducing HTTP requests is
unnecessary with SPDY due to its multiplexing. Therefore, CSS sprites
just make it slower.
Is there a way, without javascript, to load a small image for a background before the real image is downloaded? Without javascript because I know how to do it with it.
I can't test if the following CSS3 would work because it works too quick:
body {
background-image:url('hugefile.jpg'), url('tinypreload.jpg');
}
If the tinypreload.jpg is only, say 20k, and the hugefile.jpg is 300k -- would this accomplish the task? I assume that both downloads would start at the same time instead of being consecutive.
Update
Timing the results using Firefox's profiling revealed that it's not practical / not worth it to load a smaller background first. Main reason is the connection time. For tiny pictures it's the same time to connect as it is to download the content. For images where this becomes worth it -- the file size is not recommended for mobile.
If you still want to achieve this effect - combine all your "necessary" images into 1 file and display them as cropped background with correct offset. Load your high-res images through javascript, and update the content afterward.
You could exploit css load order and overrides to achieve this result.
Try loading the small image from your main css file and then put a <style></style> tag at the bottom of the html page. The inline style will override the main style but will load last because of it's position in the code.
The difference would be milliseconds though, so it may be too quick. It's also hacky and would result in invalid, but working code. Worth a shot though.
If you're trying to fix a mobile problem then have a look at this article on context specific images as that might be a more effective way to go.
This article on CSS3 multiple backgrounds may also help, as you may be able to exploit the stacking order to achieve the result you're after
It would be useful to know what problem you are trying to solve beyond load order, as it's hard to give advice on this one.
As I said in my comment you can use the 'net' tab in firebug for firefox (called timeline in chrome) to see the actual load order on your page - you can even filter it (on firefox) for CSS only or images only - this will enable you to test.
Is there any way to make ie (7,8) display a gradient AND a background-image on the same div?
The only way I got it working (but only almost) was by using two filters, one for the gradient and one using the AlphaImageLoader - but of course, then you can't position the image.
Declaring a background-image and gradient filter doesn't work, because it simply won't render the image - only the gradient.
Is there any (preferably non-js) solution to this?
If not, I'll have to resort to using a background image for the gradient as well, which isn't quite as nice but won't make much of a difference either...
I would say that adding a little unnecessary markup is the lesser of the evils here. Either that, or let IE-users live without the gradient.
Oftentimes getting your design to work is a trade-off between semantics, performance, standards and pixel perfection. Accepting that fact was hard for me, but it's made me a better front-end developer - I can work faster, and I can make decisions about what metric is important in a given case.
I have an zoomable image in the website. When the image is zoomed out to a large extend it appears very SHARP and ugly.
I tried using image-rendering : opimizequality, optimizespeed CSS but did not work.
Is there any other way out.
Thanks
According to image-rendering on MDC, image-rendering is currently only supported in Firefox 3.6. A similar property, -ms-interpolation-mode, is available for IE7 and IE8. Other browsers don't seem to have this feature (yet).
As latze mentioned, your best bet is to edit the image itself, scaling it to the level you need. I'm not sure, but you may try using <canvas> to perform the interpolation you desire.
I would simply edit the picture instead of the CSS.
Try making the picture slightly larger step by step while you make sure the picture doesn't (as we call it in danish, not sure if it correct english) "pixelate".
This can be done in various image editing programs from The Gimp-shop to Photoshop.
Images aren't meant to be resized that much. Think about an image as a graph where each pixel is a single square in the graph. If you stretch the image out, you're essentially making the pixels stretch out. Some programs try to fill in these pixels with what they think would fit there, others just make the pixel bigger, and others just fill in the surrounding areas with the same pixels to give it a sort of glowish effect. Resizing images down, while it tends to work better, also creates the same effect, because you're just chopping off pixels instead of adding them. Most programs that I've seen will squish pixels together, combining whichever colors were in those pixels. If you have a high detail image, then chopping off pixels is going to make it look horrible. There are no really safe ways to determine which pixels need to be retained to keep the overall image in tact. Most websites that have zoom features have a much larger image which has been resized down and they let you zoom to view the details of the larger image. Some even get separate images of the massive detailed one and the smaller preview one.
This issue is obviously bigger than I thought! Using the VS2008 form designer for web pages, it'd a doddle to lay everything out using pixels. In fact, as far as I can tell, it's very hard to use absolution positioning and anything but pixels.
So my webapp has developed nicely until somebody mentioned the 120DPI issue and I've wandered off into another field which I've managed to kind of ignore.
I'm the person who thinks if you get a bigger monitor, it's because you want to display more windows on there with the same size text, not make everything bigger because you're 40 and your eyes are playing up ;-)
Given that there isn't a way for the designer to lay things out in anything apart from pixels, is there is half way house? I'm not about to go through every inline style changing from pixels to em values. Sorry, but that's just too much work for a volunteer written webapp.
Is it okay to keep pixels for the layout of text boxes etc. but switch to using some percentage based system for fonts? Will that size correctly?
This is only a problem in IE7. IE8 looks at the DPI setting and scales the x,y,w,h values as required. I appreciate this is both right and wrong at the same time. IE8 now works correctly with 120DPI where fixed pixel sizes have been used.
Cheers, Rob.
Have you considered not using such strict control over your sizes? In general, you will probably find it much easier to specify as few sizes and positions as possible. HTML is designed to handle size and position dynamically. The less you specify explicitly, the more able the browser is to arrange the page as needed to fit the user's browser size and viewing preferences.
Anyway, if you really must make heavy use of fixed positioning and such, I highly recommend you not use the visual designers in visual studio. They are very much NOT up to the task. I'd recommend looking around for other designer tools that handle the WYSIWYG stuff better. While I'm not a fan, dreamweaver does a respectable job with absolute positioning and has at least some support for aspx too.
Might I suggest using the YUI 'reset-fonts-grids.css' CSS from Yahoo, then you can use EMs as your units for fonts meaning the user's browser can decide how large or small to show the text.