I'm in the process of creating Fluid images for my website (see the CSS below)
I'm taking a mobile first approach when it comes to media queries.
My question is - what exactly does 'image-rendering: auto'; do?
Does this rule ensure optimal image quality at any size? Should I be using this rule when apply mobile styles?
Should I be using image-rendering: OptimizeQaulity; ?
img {
max-width: 100%;
height: auto;
image-rendering: auto;
}
Many thanks,
P
Image Rendering describes the process of how the browser does work with your (on mobile versions probably) overcalled images when downscaling them.
image-rendering: optimizeQuality trys to give you the best looking result possible. But on mobile first you may want to try image-rendering: optimizeSpeed.
For further information you can google image rendering css which will result in a lot of information. My quick tipps is the htmlcss.wikia right here or the mozilla docs article.
If you need further information feel free to ask.
Best regards,
Marian.
Related
I'm a novice programmer, only took one course in high school. I'm trying to make a website for my business, using c9.io to write- but can't figure out how to make my page adjust to any size. I've tried finding a solution online but can't seem to fix my problem- I'm completely stumped! Good luck and thanks!
HTML and CSS code below.
https://docs.google.com/document/d/1wl1Ui-vvB39ysCQd2B5-7Yl-gYRPdQ7hUyD_L-tDcs4/edit
Edit:
The problem has been fixed, here is the CSS code that I used:
.container4 {
width:99%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
Media queries alongwith twitter bootstrap or flexbox are used to make websites responsive.
Media queries help you manage layouts for different devices say phones, tabs and desktop. Keep following in mind while writing css:-
Use ems/rems for margins/padding, avoid using pixels
2.use sass instead of pure css, its really easy to scale
I'm encountering a very niche issue CSS issue on Safari.
I have the following CSS rule:
min-height: calc(100vh - 115.5px - 25px*2);
This works on Chrome, but Safari doesn't seem to like the combination of calc and vh. (It works if I replace vh with %, for example--but I do need to calculate based on vh or some appropriate alternative.)
Is there some way around this to make this work? Alternatively, is there another way to refer to vh that is calc-friendly on Safari?
before you use vw or vh, you should define:
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
and make sure you use spaces between + and - as you did.
Safari seems to be kind of buggy with viewport units in general, especially if you go back a version or two. The last time I tried to use vh/vw, I ran into similar issues and ended up making use of the v-unit javascript micro-lib, and it worked out very well.
CSS is rapidly catching up to javascript for things like layout calculations, but when it gets complex, supplementing your css with some light scripting often works better than CSS alone.
This is a known bug - also reported on caniuse (under Known Issues).
See this SO answer for a workaround.
Basically, I want to reset (undo) a Twitter Bootstrap 2.2 reset for img that originates from the reset.less file.
Twitter Bootstrap is essentially setting this css:
img {
width: auto\9;
height: auto;
}
What CSS can I add after this to undo this? I'm actually using the bootstrap-sass gem, so that's what I need to deal with.
If I comment out the CSS in the gem source, my issue is resolved, but that doesn't help me when the gem is loaded by heroku. So I need a local override/monkey patch to fix this.
Thanks. Here is the issue: https://github.com/desandro/isotope/issues/335#issuecomment-11507013 and here: https://github.com/twitter/bootstrap/issues/6541
The problem without this patch is that the awesome isotope library can't function properly as chrome and safari can't draw the images correctly.
You can add in a new duplicate selector underneath this one:
img {
width: auto;
height: auto;
}
That should override it.
Adding it into a new file that is called under the main one in the <head> section of your document would work too.
I posted the answer here: https://github.com/twitter/bootstrap/issues/6541
Inlining this in the CSS worked, like this:
<img src="blah-blah" width=398 height=265 style="width:398px; height:265px">
In fact, I also tested Isotope without using the width and height attributes, like this:
<img src="blah-blah" style="width:398px; height:265px">
And that worked fine! Any recommendation if it's better to only specify the CSS?
I was able to very easily test this without bootstrap (or bootstrap 2.0) by using this CSS:
img {
width: auto;
height: auto;
}
It seems that the width and height in the CSS do override the image properties, and before the images get loaded, the browser does not know how much space to allocate, and then, even after the images load, the spacing is still wrong, at least with Isotope. Inlining the style does workaround the issue. I think I tried using regular styles, but that didn't seem to work, but I may have had a CSS priority issue. Any way, since the image size is laid out with the image properties, it's rather natural to put in this tiny bit of inline CSS. I hope we eventually find a better solution, as this will surely affect others when upgrading.
Or at least this should be documented that one needs to use the inline style for the width and height of the image rather than the properties.
I'm about to start designing my site that I coded in php. It's a rather complex site...
Obviously, I want to make it suitable for all browsers and devices.
Should I code the CSS using fixed pixels for normal computer dimensions and when I'm done with that make another stylesheet for other devices such as iphone and ipad?
Or should I attempt to make an adaptive site that works with all resolutions? In this case, should I look into CSS frameworks? Any recommendations?
Here's some tips for designing a web page that works on ALL screen sizes. I'll delve a bit into media queries and other things too.
On web pages I've done in the past they usually have existing graphics (usually banners/headers, etc.). so I usually design the web site using a maximum width for example, if the banner image that already exists is 900px wide I'm going to make the page 900px wide, more specifically the content wrapper will be 900px wide and it's contents will sum to 100%.
Keep everything in a global content wrapper. This is the easiest way to ensure the page size stays 100% consistent.
The sum that makes up the wrapper should always amount to 100%. Fill the wrapper, but it will never go outside of it. You may have numerous columns or divisions, which you can size at any percentage up to a sum of 100. (like, col1 width="33%", col2 width="33%", col3 width="34%" = 100%)
Try to pick images that work for ALL screen sizes. There is no built-in way to swap to mobile images when working with responsive web design (there are javascript solutions), but pick an image that looks good when scaled down.
Avoid scaling an image up. This is why i tend to make the max page size the same size as a header image (if there is one). If the page has no images, 100% liquid layouts are very good too.
If the content wrapper is fixed, turn it into a percentage with a media query :D example below.
I'm going to write up a basic example of a MAX width 900px page with columns that works on any site mobile/desktop.
default-style.css
img
{
max-width: 100%;
height: auto;
width: auto; /* ie8 */
border: none;
}
.content_wrap
{
width: 900px;
margin-left: auto;
margin-right: auto;
height: auto !important;
}
/* Columns */
#column-wrap
{
float: left;
width: 100%;
}
#column-left
{
width: 30%;
float: left;
}
#column-middle
{
width: 35%;
float: left;
}
#column-right
{
width: 35%;
float: left;
}
default-queries.css
/* Turn it into a liquid layout at our max-width of 900px */
#media screen and (max-width: 900px)
{
.content_wrap
{
width: 100%;
}
}
/* most smart phones */
/* This query will turn all 3 columns into 1 column at 540px */
#media screen and (max-width: 540px)
{
#column-wrap
{
position: relative;
clear: both;
}
#column-wrap div
{
margin-bottom: 10px;
float:none; clear: both;
}
#column-left
{
width: 100%;
}
#column-middle
{
width: 100%;
}
#column-right
{
width: 100%;
}
}
Now for the html :D
index.html
<!DOCTYPE html>
<html>
<head>
<link href="default-styles.css" rel="stylesheet" />
<link href="default-queries.css" rel="stylesheet" />
</head>
<body>
<div class="content_wrap">
<div id="column-wrap">
<div id="column-left">
<p>HELLO I"M LEFT COLUMN</p>
</div>
<div id="column-middle">
<p>HELLO IM MIDDLE</p>
</div>
<div id="column-right">
<p>RIGHT</p>
</div>
</div></div>
</body>
</html>
So this is a most primitive example of a responsive web site. Using the class content_wrapper at a fixed width of 900px (because the biggest image im using may be 900px). But when the screen is smaller than 900px, we switch from fixed to liquid via media query switching to a liquid width will allow our images to scale down, our text to wrap, and a whole bunch of other great things!
But, there's more to it than that. That's all we need to do if the page only has linear content, but most pages have different columns to make the most of large screen sizes. This is where media queries REALLY come in handy. If you study the columns, their sum takes up 100% of the content_wrap at all times. And they will scale down for a small website, but they will be really really tiny. This is why I make another media query for smaller screens and eliminate the multi-column layout. Simply clearing the floats and making each column have a width of 100%, will allow for a much more efficient mobile layout.
Anyway, really long answer but hopefully my views/opinions on how to properly design a website with CSS/HTML (php, ASP.net, MVC, etc, can all be thrown in there too) will get you started! Design with a wrapper, media queries, no upscaled images, and images that look good scaled down are really good practices IMO ;)
I like fixed width pages! They are more universal and prevent over-scaled images Media queries in CSS3 take care of responsiveness ;)
I usually DON'T do mobile-first designs, but that's just my personal preference. I see no advantage to one way over the other
As stated in another answer, for non-CSS3 browsers response.js works very well
As usual, it depends. If you think your site is going to be accessed by many devices then you probably want to look at responsive design: http://johnpolacek.github.com/scrolldeck.js/decks/responsive/ and http://www.alistapart.com/articles/responsive-web-design/ for more details.
The recommended approach is to take a 'mobile first' approach to the styling, so it works well with little markup for mobile devices and then progressively enhance for other devices with larger resolutions.
You may want to use frameworks or hand-code it - that's something of a personal choice.
If you have significantly different needs for different devices, you may want to create entirely different sites for mobile, similar to the current BBC news for instance, although it's worth noting that many sites including BBC are moving to responsive techniques, so this is a trend that is being adopted more and more.
It's also worth considering which browsers your audience will be using. As you reach back into older IE versions especially you'll need to look at javascript techniques such as the respond.js library to allow media queries to work.
The two aren't mutually distinctive.
The two approaches are generally:
Multiple stylesheets, media queries decide which one to load.
Use fluid measurements (percentages) so the site is fluid.
In reality, you often end up using a bit of both.
There are many issues with trying to do this, one particularly being that older IE doesn't support media queries, and renders everything all the time.
Frameworks are good, but you may find them restrictive. There are many around, and they all basically do the same thing, so just google Responsive CSS framework and see what you find.
I'd also recommend looking into SASS at this point - I use it so I can auto generate an IE stylesheet that has the 960px width version with no media queries, whilst generating another sheet with all the queries in.
Already been answered, I see, but I think what I've got to say is relevant...
Most sites do both a desktop site and a mobile site. Desktop sites are almost always fixed width, with a maximum width at about 1000px. This is starting to change, though, you will see more adaptive sites than in the past. Mobile sites need to have an adaptive width, because of all the crazy different resolutions on all the various phone models out there. I recommend that the smallest width the mobile site should work at is about 320px, because most modern phones are at least that width.
As for mobile detection, take a look at PHP Mobile Detect, it's what I use, and it works pretty well. You just throw in
<?PHP
if ($detect->isMobile()) {
header('Location: /path/to/mobile/site');
} else {
header('Location: /path/to/full/site');
}
?>
at the very top of the first page. You should use a seperate splash page that redirects to something like index2.htm so that users can choose to view the desktop site if they want. It saves you a lot of trouble trying to figure out how to set cookies...
I recommend making an adaptive or responsive that can maintain its look across multiple device resolutios. With that being said CSS framework will be your option so your html file is not filled with your topic content and style code.
What is the definitive way to mimic the CSS property min-width in Internet Explorer 6? Is it better not to try?
foo { min-width: 100px } // for everyone
* html foo { width: 100px } // just for IE
(or serve a separate stylesheet to IE using conditional comments)
You could use an expression (as suggested by HBoss), but if you are worried about performance then the best way to do this is to add a shim inside the element you want to apply a min-width to.
<div id="container">
The "shim" div will hold the container div open to at least 500px!
You should be able to put it anywhere in the container div.
<div class="shim"> </div>
</div>
#container .shim {
width: 500px;
height: 0;
line-height: 0;
}
This requires a little non-semantic markup but is a truly cross-browser solution and doesn't require the overhead of using an expression.
This article on CSS Play, by Stu Nicholls, shows the different methods for achieving min-width in IE, in all modes (Quirks, etc) and even for IE/Mac.
I've fiddled with every answer given here in the past month. And after playing with Pretaul's method (Min-width in MSIE 6), it seems to be the best alternative to min-width. No hacks or anything, just straight up compliant CSS code which takes 30 seconds to implement.
From Googling around, expressions seem to be the most popular. For me anyways, ittended to randomly lock up my browser (both IE and FF).
I dunno, I had some success with:
min-width: 193px;
width:auto !important;
_width: 193px; /* IE6 hack */
A combination of dustin diaz' min-height fast hack & How do I specify in HTML or CSS the absolute minimum width of a table cell
do your css tag as _Width: 500px or whatever.
This works pretty well...
div.container {
min-width: 760px;
width:expression(document.body.clientWidth < 760? "760px": "auto" );
}
Min-height fast hack works for me (also works for width)
The shim example is fine for forcing the browser to show a horizontal scroll bar when the container gets to a certain size but you'll notice that the content in the container will still be resized as the window gets smaller. I imagine that this is not the overall goal when trying to achieve minimum width in IE 6.
Incomplete min-width technique http://www.mediafire.com/imgbnc.php/260264acec99b5aba3e77c1c4cdc54e94g.jpg
Furthermore, the use of expressions and other crazy CSS hacks just isn't good practice. They are unsafe and unclean. This article explains the caveats of CSS hacks and why they should be avoided altogether.
I personally consider scaryjeff's post to be the best advice for achieving true min-width in IE6 and as an experienced CSS layout developer I've yet to find a better solution that is as applicable to problems of this kind.
This article on CSS Play, by Stu Nicholls, shows the different methods for achieving min-width in IE, in all modes (Quirks, etc) and even for IE/Mac.
I've provided an answer to a similar question that details the use of this technique to correctly achieve min-width. It can be viewed here:
CSS: Two 50% fluid columns not respecting min width
The technique is simple, valid CSS that can be used in almost any situation. Applied to the shim example above it results in what I consider to be correct min-width functionality.
Correct min-width technique http://www.mediafire.com/imgbnc.php/a67b2820bfbd6a5b588bea23c4c0462f4g.jpg
Single line button
button{
background-color:#069;
float:left;
min-width:200px;
width:auto !important;
width:200px;
white-space: nowrap}
Use conditional comments to reference and MSIE 6 specific style sheet, then create CSS as below.
Compliant browsers will use:
min-width: 660px;
Then MSIE 6 will use:
width: expression((document.body.clientWidth < 659)? "660px" : "auto");