I use the webkit/mozilla border radius and box shadow CSS properties, but I want the CSS to validate (which it currently does not). Is there a way to get it to validate?
http://jigsaw.w3.org/css-validator/
Although the syntax for vendor extensions is mentioned in the CSS3 Syntax module and introduced into the grammar to allow vendors to implement their own prefixes ignoring the standard, the actual vendor extensions themselves are not recognized as official CSS properties. This is not going to change, as they're proprietary and specific to the vendors that invent and use them.
However, a recent enhancement (early 2011) to the Jigsaw W3C CSS Validator makes it possible to reduce validation errors triggered by vendor extensions to warnings. Find this new option among other such as the level of CSS to validate against by expanding the More Options section:
This makes it easier to find the real problems with your stylesheet if it still doesn't validate. If vendor extensions are the only things triggering errors, turning them into warnings will allow your stylesheet to validate tentatively. It also eliminates the need to maintain vendor extensions in a separate stylesheet that you have to hide from the validator.
Warnings are the furthest you can shy away from errors, though, as ultimately, vendor prefixes are still non-standard and therefore technically invalid CSS.
No, they are browser specific properties, and not defined in the standard CSS specification.
That being said, they correctly follow the rules for vendor specific extension of CSS. It's just not in the W3C official CSS specification.
It partly possible. Collect all your unsupported css classes in one file (css3.css)
Example:
css3.css
.round{
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
-webkit-border-bottom-left-radius: 5px 5px;
-webkit-border-bottom-right-radius: 5px 5px;
-webkit-border-top-left-radius: 5px 5px;
-webkit-border-top-right-radius: 5px 5px;
}
default.css
.square{
width: 100px;
height: 100px;
border: 1px solid #000000;
}
page.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css">
<script type="text/javascript">
document.write('<link rel="stylesheet" type="text/css" href="css3.css">');
</script>
</head>
<body>
<div class="square round"></div>
</body>
</html>
Search engine don't run client scripts, so your W3C unsupported attributes will not damage your SEO.
As for green css validation, sorry, not yet.
No, as they are not part of the standard the validator validates against. The only solution that comes to mind is to put the incompatible properties into a separate style sheet.
The Mozilla and WebKit specific properties will not validate. What you can do is separate your "enriched" css into a separate style sheet. Just like you separate your ie hack styles out of your main style sheet. This way your base style sheets will validate.
If you use a separate CSS file for my "invalid" or "browser-specific" CSS then use a little PHP to filter out that CSS from the validator:
<?php
if(preg_match("/jigsaw.w3c.org/i", $_SERVER['HTTP_HOST'])){
echo '<link rel="stylesheet" href="invalid.css" type="text/css" media="screen, projection" />';
}
?>
Then link to the validator with CSS3 as the profile (accepts border-radius, text-shadow, etc.):
http://jigsaw.w3.org/css-validator/check/referer?profile=css3
$_SERVER['HTTP_HOST'] doesn't work but perhaps there is something that will?
12-12-2011
Kami really posted the best solution. I create a separate css3.js file and document.write(''); the CSS line by line:
CSS3.js
document.write('\
<style type="text/css">\
home_low_mod {zoom: 1;}\
#home_module {-moz-border-radius: 8px;-webkit-border-radius: 8px;-moz-box-shadow: 0px 1px 3px #a5a6a2;-webkit-box-shadow: 0px 1px 3px #a5a6a2;behavior: url(PIE.htc);}\
#page {-moz-border-radius: 8px 8px 0 0;-webkit-border-radius: 8px 8px 0 0;behavior: url(PIE.htc);}\
</style>');
#BoltClock is TOTALLY right on this one... W3C has indeed added a vextwarning level BOOL search criteria. It is NOT documented... but if you are using their SOAP API validation you can add a parameter to the payload of your validation GET request....
&vextwarning=true
for example... if you wanted to edit the CSS validator command in TextMate... you would "Edit Bundles...", aka ⌃+⌥+⌘+B
#!/usr/bin/env ruby
print '<html><head><meta http-equiv="Refresh" content="0; URL='
print 'http://jigsaw.w3.org/css-validator/validator?\
warning=0&profile=none&usermedium=all&text='
scope = STDIN.read
…
to - something - more along the likes of
#!/usr/bin/env ruby
print '<html><head><meta http-equiv="Refresh" content="0; URL='
print 'http://jigsaw.w3.org/css-validator/validator?\
warning=2&vextwarning=true&profile=css3&usermedium=all&text='
scope = STDIN.read
…
Notice that I also added a level=css3 and changed the warninglevel. Alter these, according to the API, as needed.
If you want to see all the parameters that are available via the "online" submit mechanism.... open up Firebug, or the Webkit inspector, etc.. while submitting a query via their form and check out the full request content to get even more options, as needed...
Related
I'm trying to get rounded corners to on of my css class with the code as it follows
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
I have been reading couple of articles related to my issue and the code above should be ok but in my case won't fire.
Add this to your markup as the very first line.
<meta http-equiv="X-UA-Compatible" content="IE=9" />
Use this for border radius for better compatibility with other browsers also.
-moz-border-right-radius: 5px;
-webkit-border-right-radius: 5px;
border-right-radius: 5px;
-moz-border-left-radius: 5px;
-webkit-border-left-radius: 5px;
border-left-radius: 5px;
IE9 uses CSS3 (the industry standard). Your code should therefore work.
A very common problem is that although you are using ie9, it might be rendering the page using an older version. See if compatibility mode is enabled by mistake. You could also try the developer tools (F12) and look at the document mode and browser mode (at the top) are set to IE9.
I feel so stupid, like I'm missing something really obvious but I have checked everything a bunch and can't figure out what's wrong. I'm trying to use CSS3pie to make rounded corners in ie8, but it just won't take.
I have the path set up relative to the html document, not the css. It's in a folder called pie, so this is what i'm using in the CSS:
#recommended-acc {
float: left;
width: 472px;
background: url(../img/cont_bg.png) repeat;
margin: 10px;
padding: 0 10px 6px 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
behavior: url(pie/PIE.htc);
border-radius: 5px;
border: 1px #d8d8d8 solid;
}
Does anyone know more about css3 pie who could maybe advise me on what I'm missing? I've tried it on a ton of different elements and it hasn't worked once.
A few things to try:
Use a leading forward slash in your path:
behavior: url(/pie/PIE.htc);
This will make sure the path is correct in case you are on a page with more than one URI segment, like http://example.com/pages/archives/mypage.html. WIthout the leading forward slash, it would be relative from mypage.html and not the root directory (which it should be).
Try to force hasLayout (obscure IE thing) by adding position:relative; or zoom:1 to the element. This is often the issue, the HTC file is referenced correctly but the styles won't apply without it.
Read the known issues page carefully and make sure you aren't experiencing any of the other multitude of common problems.
I too had these problem in my earlier days.
You've to keep the pie.htc file generally in the root of the project folder.
I know the following solution is a little weird but you could try it
Try adding an alert or console in the pie.htc file and place the file in each folder until it gets rendered.
HOW to make sure your HTC file loads..
put below <script type="text/javascript"> alert("test");
this alerts test when the file loads
put in the complete url in your css file behavior: url("http://www.yourwebsite.com/test/PIE.htc");
WHen you load the page an alert shows up :)
this means you are sure the file loads :)
now shorten the behavior: url("relative to the CSS-FILE/PIE.htc"); and make sure you still get the alert
remove the alert =)
You are now 100% sure it is using the HTC file
I struggled with this, All I can suggest is try this.
Use the Javascript version with jQuery
<!--[if lt IE 9]>
<script type="text/javascript" src="js/PIE_IE678.js"></script>
<![endif]-->
<!--[if IE 9]>
<script type="text/javascript" src="js/PIE_IE9.js"></script>
<![endif]-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css"/>
<script>
$(function() {
if (window.PIE) {
$('.Circle').each(function() {
PIE.attach(this);
// alert("Attached");
});
}
});
</script>
<![endif]-->
Now in your CSS, with the .Circle class or any class which is using the CSS 3, give them:
zoom: 1;
position: relative;
One other note I have found when using jQuery & the migrate plugin - some are "finicky" these work.
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
With luck, that will do the trick.
Guys i found the problem you where looking for.
First of all I used 2 different web host. 1 of my own and 1 of the company.
I made my full css3 responsive webdesign hand coded on my own website.. which I needed the PIE.htc file to get the rounded corners working for all IE versions and I succeeded!.
However when I uploaded the same files to the web host of my company it didn't work anymore.
And it turns out that they doesn't support .htc files.
So I scratched my head and didn't get it right either, but then I discovered that this provider will work with the PIE.php file.
So if for you this doesn't work;
.bg {
border-radius:60px;
width: 80%;
height: 85%;
position: fixed;
top: 10.2%;
left: 18%;
z-index: 1;
border:3px solid #fff;
background:#fff;
behavior: url(pie/PIE.htc);
Than this does;
.bg {
border-radius:60px;
width: 80%;
height: 85%;
position: fixed;
top: 10.2%;
left: 18%;
z-index: 1;
border:3px solid #fff;
background:#fff;
behavior: url(pie/PIE.php);
Just change the PIE.htc to PIE.php and it will work.
I'm using Compass to create webpage CSS styles. I wanna use CSS3 features like border-radius and linear-gradient but Internet Explorer refuses to cooperate.
I coded it this way:
$pie-behavior: url("../stylesheets/PIE.htc");
// I've tried 'stylesheets/PIE.htc' and '/pink/stylesheets/PIE.htc' (all webpage is in folder 'pink').
$pie-base-class: pie-base;
.pie-base {
#include pie-element(relative);
}
body {
#include pie;
#include background(
image-url('header_background.png') no-repeat top center,
linear-gradient(top center,
$bg-gradient-start, $bg-gradient-stop
) no-repeat,
image-url('wavy-white.jpg')
);
}
What's wrong with it?
My test methodology would be:
1/ Is PIE.htc found by IE? PIE documentation states that:
Note: this path is relative to the HTML file being viewed, not the CSS file it is called from.
In order to verify if the directory indicated in your Compass file is OK, you can add an image in the same directory and try to display it as an HTML image, something like:
<body><div>
<img src="stylesheets/yourtestimage.png" alt="If you can read this, it failed" width="400" height="400">
</div></body>
It should then be clear if this directory is the good one or not :)
2/ Then try some simple CSS rule with no Compass code, in order to avoid problems that could be caused by Compass and not involving PIE. Example :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>PIE and border-radius</title>
<style type="text/css">
p {
width: 400px;
height: 100px;
line-height: 100px;
vertical-align: middle;
text-align: center;
color: yellow;
background-color: darkgreen;
border-radius: 5px 6px 7px 8px;
pie-border-radius: 30px; /* shouldn't be necessary but just in case ... Please test with and without this prefixed property */
behavior: url(***/PIE.htc);
</style>
</head>
<body>
<p>this paragraph should be rounded in lesser IE</p>
</body>
</html>
3/ Add other CSS3 instructions one by one, still in CSS with no Compass code. background won't be parsed by PIE, you must use -pie-background (not sure if your Compass generates that?).
First a simple linear gradient with no multiple background:
p {
/* (...) */
-pie-background: linear-gradient(#F44, #400); /*PIE*/
/* (...) */
}
Then multiple background:
p {
/* (...) */
-pie-background: url(***/small_or_transparent_image1.png) left top no-repeat,
url(***/repeating_image2.png) left top repeat,
darkgreen;
/* (...) */
}
and finally a mix:
p {
/* (...) */
-pie-background: url(***/small_or_transparent_image1.png) left top no-repeat,
linear-gradient(#F44, #400),
darkgreen;
/* (...) */
}
BTW, is your multibackground successfully displayed on Firefox and webkit browsers with -moz-linear-gradient and so on? The generator from Colorzilla can help you with all this prefixes (and for the next step with Compass, it happens to support its format via "switch to scss", in case you didn't already know).
4/ Then add variables and scss code in your Compass file. I can't help you there, I use LESS or plain CSS. You should check the generated CSS against your Compass code: does the latter generate the CSS you intended it to generate?
I have found that cssPIE is tricky to work with. When I set it up, I used the js implementation instead of the htc implementation:
<!--[if lte IE 8 ]>
<script src="/js/libs/PIE.js" type="text/javascript"></script>
<![endif]-->
Here is my real world example: http://www2.highpoint.edu/
Have you tried adding a proper MIME type in your .htaccess ?
Like so :
AddType text/x-component htc
I've found that cssPIE don't understand rgba values so my idea of making gradient from colour to transparent shouldn't work :/ Also IE don't understand inline SVG in CSS styles so even that feature isn't working. So only way is to make another style for IE and delete gradients from all gradiented elements :/
I know in order to include a browser specific css file you can do the following
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style.css" />
<!-->
But is there a way to do this in the actually stylesheet itself?
EDIT
Thanks for the replies, I am just going to build a new IE specific stylesheet and override what I need there. I think this is prob the best way to do things.
Check this post, scroll down to Hacks:
http://www.dezinerfolio.com/2009/02/20/css-standards-best-practices
Actually, yes there is.
It wont validate, but if you add _ before the property name so div {width: 200px;_width: 100px;} will be 200px wide in non-ie browsers and 100px in IE.
I have decided that building a separate stylesheet and then using the comment IF statement is the best solution. Keeps the stylesheets clean and it is more obvious to others as to what you are doing (overriding properties due to browser quirks).
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="StyleIE.css" />
<!-->
These work...
.foo{
border:1px solid #000;
*border:3px dotted #00f;/*IE6 & IE7 Only*/
_border:2px dashed #f00;/*IE6 Only*/
}
Thus the outcome is:
W3C Browsers (Firefox, Safari, Opera, etc.)
1px solid black border
IE7
3px dotted blue border
IE6
2px dashed red border
As a last resort (and not highly recommended) you can use the dynamic properties by using expression() then test for the browser version (if you care)
you can also use the !important flag to do this, but that may have unintended side effects.
Click Me I'm !important
I want my submit buttons + links to look as buttons and the same in all browsers.
Firefox 3.5 plays nice. But IE6,7,8 have all different looks. Can you help me with that (apparently) simple task?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Crossbrowser css submit button, links</title>
<style type="text/css">
button {
background:#FFE900;
color:#000;
padding:3px 5px 3px 5px;
border:1px solid #000;
}
input {
background:#FFE900;
color:#000;
padding:3px 5px 3px 5px;
border:1px solid #000;
}
a {
background:#FFE900;
color:#000;
padding:3px 5px 3px 5px;
border:1px solid #000;
text-decoration:none;
}
</style>
</head>
<body>
Buy now
<input type="submit" value="Buy now" />
<button type="submit">Buy now</button>
</body>
</html>
You can replace the Submit button with an image the same way you do it with a background-image for a link. Simply get rid of the background and border, put the background-url in the input selector, and give it the right width and height.
input{
background-color: white;
border: 0;
background-image: url('blah.png');
}
For the button instead of type="submit" use type="image".
For instance:
<button type="image" src="path_to_your_image.png">Buy now</button>
For link you can use css to set the background of your link:
background-image: url('path_to_your_image.png');
I take it you do understand that you'll never get them to look exactly the same, since even in Firefox 3.5 they don't look exactly the same for me.
And apart from purely the style, they'll always have different behavior. For example, buttons will respond differently to tabbing or clicking (some browsers "depress" the text), buttons won't show the URL they point to in contrast with links, and you can select the text of a link, but not that of a button.
You can fix the most glaring differences on IE6 and 7 quite easily, though.
Add this to the CSS for your buttons (<button> and <input>):
overflow: visible;
You can put it inside a stylesheet for IE6/7 only, though this shouldn't affect any other browser, since visible is actually the default value. But for some reason this fixes the inconsistencies with the padding, compared to that for the link, on IE6 and IE7.
And add the following to the CSS for the link. All browsers need this, to make the link behave more like a block element, just like the buttons:
display: inline-block;
I know this is an old question, but I recently ran into this issue and didn't want to use any images in my layout. The solution I came up with (after making the links blocks, as others suggested) was to explicitly setup the borders, fonts, and background colors. To get the borders to match, set them individually. Originally I was trying to use outset borders, but I had better success using solid borders with specific colors for top, left, bottom, and right. (I chose the colors based on what firefox was using for its outset borders.) Hope this helps someone. Also, adding a border-radius to the links and buttons makes them a bit cleaner.
If you want a uniform appearance, you'll need to use an image submit button.
You could always use a JavaScript framework to replace the element with one that is more stylable or use MSIE's conditional comments for browser-specific styling.
Sad truth is cross-browser pixel perfection seems impossible with pure CSS and buttons.