Sorry for the silly question, but I am really beginner and I need your help.
I added modernizr-2.8.3.min.js in my website.
I visited the modernizr home page, but I don't understand how to download it.
Then, I found this modernizr file in the html5 boilerplate.
When I add this in my , is this helping me not to add vendor prefix?
Or, if I do not do anything with modernizr, should I use some kind of 'prefix free' file?
Thanks.
Modernizr is a javascript library that detects the browser features. You can use it two ways.
Just include this in your file.
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js">
Go to https://modernizr.com/download?setclasses and select the features you want modernizer to detect. I can see how this can be confusing if you are a beginner so I suggest that you use the first option.
Once you include this in your html change your html tag to this <html class="no-js"> and when you see your page in the browser you will see something like this.
<html class=" js no-flexbox no-canvas no-canvastext no-webgl no-touch no-geolocation no-borderimage no-borderradius no-boxshadow no-textshadow no-opacity no-cssanimations no-csscolumns no-cssgradients ... etc">
Now you can write your css for regular browsers and the one that doesn't support your feature.
So if you want to add gradients to <div class="gradient"> for regular browsers you do something like this.
div.gradient{
background: linear-gradient(red, yellow);
}
but for browsers that doesn't support border-radius modernizr adds no-borderradius to your html tag, see above. So for these browsers you can write your css like this to ensure a consistent view.
.no-cssgradients div.gradient{
background: url("glossybackground.png");
}
Related
I am needing an approach where I can scope CSS files to a certain portion of the page. In theory, this example should do what I need:
<html>
<head>
</head>
<body>
<div>
<style scope>
#import url("style1.css");
</style>
<div class="testText">Test with Style 1</div>
</div>
<div>
<style scope>
#import url("style2.css");
</style>
<div class="testText">Test with Style 2</div>
</div>
</body>
</html>
However, I found out that the scope element is only available in some browsers right now (Firefox 21+ mainly). So, I'm looking for a lazy way out or a problem. I need to integrate some content with different styles into a site. We tried loading both css filesets, but there are some style names that appear in both stylesheets, so it will be a lot of work to rename the style names in one fileset and in the corresponding html content, specially because you cannot just refactor with Eclipse... :)
Is there any other solution that can render such a result that is widely compatible?
Regards
Scoped styles aren't well-supported at this point and are going to cause you problems if you're expecting any sort of cross-browser coverage.
The only way you can really achieve what you're after is to use a unique classname (or ID) for each 'section' and then use inheritance to sort-of namespace your CSS. So if you want to target one specific section of the page, give it's parents a classname (eg: class="testone") and then make sure that any styles you want to apply to that section are appended with that classname:
.testone .title{...}
.testone h1{...}
.testone a{...
etc.
Failing that, there is also a jQuery-based scope polyfill which should give you a more browser-independent way of working with scoped CSS. It isn't something I've worked with so don't have any experience to offer, but it looks very promising from the few moments I've spent with it!
Do remember that as with any JavaScript-based solution like this one, anyone who loads your page without JavaScript enabled isn't going to get those little extra niceties so it's important to ensure that the page still behaves in an acceptable manner even when JS is disabled.
The attribute name in HTML5 drafts is scoped, not scope.
Support to it is slowly being implemented, but there is little reason to use the attribute, or scoped style sheets. Most browsers will take <style scoped> simply as <style> and apply it to the entire document.
Thus, it is best to analyze the problem you are trying to solve and find a different approach to it. In many cases, it is trivial, using suitable contextual selectors. Assign an id attribute to an element and use an id selector as the first component of selectors.
As I am using SendGrid service at heroku, I've noticed that when I send HTML based emails, the CSS has no effect, can any one tell me what could be wrong ?
I tried to send it as html.haml, html.erb, but both didn't work, although the images are viewed correctly in the sent emails.
Any idea ?
Try using inline styles instead of an external stylesheet.
Like this:
<div style="color:green;" id="div"></div>
instead of something like this:
<style>
#div {
color:green;
}
</style>
<div id="div"></div>
(Thanks Kelvis Miho for pointing this out)
Edit: I searched for #Joe's text on Google, and I realized that most of it was copied from http://css-tricks.com/using-css-in-html-emails-the-real-story/ .
Edit: Joe edited his post to include the reference link.
Remember that most email clients don't support a lot of CSS, so you should mostly be using both images, and tables.
You could, for example, code a wonderful email design and then screenshot it. With tables, you could put the logo on the top in the center, the screenshoted beautiful "featured" pane on the left, the "discount" as the content in the center under the logo, ect.
What you CAN'T do:
Include a section with styles. Apple Mail.app supports it, but Gmail and Hotmail do not, so it's a no-no. Hotmail will support a style section in the body but Gmail still doesn't.
Link to an external stylesheet. Not many email clients support this, best to just forget it.
Background-image / Background-position. Gmail is also the culprit on this one.
Clear your floats. Gmail again.
Margin. Yep, seriously, Hotmail ignores margins. Basically any CSS positioning at all doesn't work.
Font-anything. Chances are Eudora will ignore anything you try to declare with fonts.
There are quite a few more things you should be aware of. For a great complete list of what online email services support what, check out this article at Xavier Frenette.
What you CAN do.
In two words, inline styles. It's not as awful as you might think, since we are basically developing a one-off email, inline styles are not nearly as egregious as using them on a website.
from this site
You need to use inline styles.
To me, the premailer-rails gem works like a charm. You just need to add this gems to your Gemfile
gem 'nokogiri'
gem 'premailer-rails'
And all your emails will include styles from the assets folder. I usually create a email.css.less in the assets folder and then I include it on the <head> of the email like this
<%= stylesheet_link_tag 'email.css' %>
And also, when I need to include an image I found this helper that allows me to attach images into the email so they have logo and stuff.
module EmailHelper
def email_image_tag(image, **options)
attachments[image] = File.read(Rails.root.join("public/#{image}"))
image_tag attachments[image].url, **options
end
end
And in the .erb template
<%= email_image_tag "img/logo.png", :class => "some-class" %>
Hope it helps someone, Regards
Make sure that you are putting internal style inside head tag
eg:
<head>
<style type="text/css">
...
...
</style>
</head>
Note: Only inline style and internal style (must be in head tag) supports.
https://www.campaignmonitor.com/css/
shows all css support for popular mail clients. Also it appears that for the most popular gmail-client display:grid/flex is not supported
I have a very strange issue in that no CSS styles are being loaded in IE8 (maybe IE7 as well but cannot check). My site is at http://www.leavetrackapp.com/ and my master CSS file is as follows:
#import url("reset.css");
#import url("screen.css");
#import url("site.css");
#import url("colorbox.css");
The master.css file and indidivual stylesheets are accessible if I directly enter the address in the browser e.g. http://www.leavetrackapp.com/stylesheets/master.css returns the main file.
I think it's a problem with the import rules but have no idea what it could be. Safari and Firefox work fine.
Any advice appreciated.
Thanks
Robin
#Guffa put me onto the right track with this: the problem is that the HTML5 elements aren't working in Internet Explorer 8 and lower.
Modernizr would fix this, but: http://www.modernizr.com/docs/#installing
Drop the script tags in the <head> of
your HTML. For best performance, you
should have them follow after your
stylesheet references. The reason we
recommend placing Modernizr in the
head is two-fold: the HTML5 Shiv (that
enables HTML5 elements in IE) must
execute before the <body>, and if
you’re using any of the CSS classes
that Modernizr adds, you’ll want to
prevent a FOUC.
So, you simply need to move Modernizr from just before </body> to inside the <head> element.
The problem is not that the style sheets are not imported, the problem is that you are using the HTML5 section tag, which IE8 and earlier does not recognise.
If you change the section tags to div tags, it will work better.
I'm familiar with the html conditional tags
<!--[if IE]><![endif]-->
Because of various issues I need to use a single stylesheet. So I cannot use the above solution. I can't find hacks that work to target only ie9 browsers so I need an alternative.
I remember seeing once a condition used in a stylesheet that only IE understood. Something with an # sign and 'MS'. It was awhile ago.
Does anyone know about this? Can it be used for browser specific (ie only) styling?
OK this is about the BETA and PREVIEW's of IE9, but maybe these will work for the full release also?
http://archivist.incutio.com/viewlist/css-discuss/112904
<body>
<!--[if IE 9]><div id="ie9"><![endif]-->
... your page here ...
<!--[if IE 9]></div><![endif]-->
</body>
with a css like
#ie9 #wrapper { background-color: blue; }
will make a blue background only in IE9, all other browsers won't find <div id=ie9> since its hidden in the comments. that should do the trick :)
See also Wikipedia on Conditional comments for an in-detail explanation.
I'm building a web site that uses a fair amount of drop shadows and gradients. I can accomplish a lot of this via CSS's box-shadow properties.
Alas, we're still supporting IE, so we need to add background images in those situations.
I could be lazy and just give everyone the background images, but I'm trying to streamline things for those that are using the modern browsers. Ideally, I'd like to have those users not have to request the images.
So, I'm adding an extra class via javascript if the browser supports the box shadow (box-shadowSupport) and my CSS ends up looking like this:
.box {
background: url('myImage.jpg');
}
.box-shadowSupport {
background: none;
[box shadow properties go here]
}
If the HTML ends up looking like this:
<div class="box box-shadowSupport"></div>
Will the image be requested? Or does the browser understand that it isn't needed due to the second style over-riding the background image property?
If the image is requested, I need to rearrange my CSS and javascript so instead of over-riding a style via the cascade, I'll have to swap out the classes so the first isn't even referenced in the HTML.
I believe every web browser will treat this in it's own way - as usual :) My suggestion is to use a web proxy like Charles and see, if the image has been requested or not. And of course, test this in the different browsers.
What you might want to consider is defining the IE specific styles in a separate sheet and loading it with conditional comments, like this:
<!--[if IE]>
<link rel="stylesheet" id="ie-css" href="ie-specific.css"
type="text/css" media="all" />
<![endif]-->
This will only load the sheet with IE-specific settings and you can override the other classes with !important markers. Conditional comments have been around since IE5, and any other browser will ignore the block above.
I would recommend just to skip the shadows in IE.
Most people use only one browser and they won't know that there have to be shadows. It isn't a big deal if the site looks different in different browsers as long they look normal (that means not glitchy).
Otherwise use with a if tag for ie specific css, and you can do drop-shadow there with:
.box {
filter: progid: DXImageTransform.Microsoft.dropShadow(
color=#818181,
offX=5, offY=5,
positive=true);
}
For more about that see here.
I am pretty sure that all modern browsers will load 'myImage.jpg'. Actually, the code you provided described the pure CSS way of preloading images without using javascript :)