I am trying to use the following two properties in my styles.css:
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
It comes up with the following message.
They are not known css properties.
You get that message beacause these are css3 properties.
To check it's validity use:
http://jigsaw.w3.org/css-validator/validator?uri=EXAMPLE.COM/STYLE.CSS&profile=css3
replace EXAMPLE.COM/STYLE.CSS with url to your css file.
If you have those errors in your browser you need to use the more border-radius types because all the browsers have there own.
an example for border-radius:
-webkit-border-radius: 5px; /* Safari and webkit */
border-radius: 5px; /* Opera, Chrome */
-moz-border-radius: 5px; /* Mozilla (FF, Seamonkey) */
an example for box shadow:
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
Support for these CSS3 properties is growing, but a lot of browsers don't have it yet.
The latest Opera has the capability, Safari, Chrome and Firefox too but they require custom properties.
The best approach is to duplicate each property, once with the prefix -moz- and once with the prefix webkit-. Always write the standards compliant rule last. Like this:
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px; /*w3c border radius*/
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5);
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5);
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
You can check which browser supports what on Standardista.
I believe that's a Visual Studio error message, right? If so, just ignore it. But do add browser specific versions of those rules to your css for older browsers. e.g. -webkit-border-radius and -moz-border-radius etc.
Related
I am learning CSS, and Ajax border radius is not working in ASP.NET it shows a error like border radius is not a known css property name.
This is because your visual studio 2010 CSS validator is set to 2.1 or lower and border-radius added in CSS3. This is just a warning, so it will work as intended.
Morpheus is right. And some other browsers also does not support that
The best approach is to duplicate each property something like this.
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5);
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5);
box-shadow: 3px 3px 4px rgba(0,0,0,.5);
You can check browsers compatibilty here Border Properties, Values & Browser Support
or
the BEST way is just to IGNORE IT because it still works the way it is. :)
I have been struggling with IE8 issue's and came across this issue of Rounded corners ,
Where all the browsers would accept border-radius except IE8.
font-size: 12px;
margin-left: 7px;
margin-top: -13px;
border-radius: 10px 10px 10px 10px / 5px 10px 5px 10px;
After a long struggle i have resolved this issue,
Downloaded : http://css3pie.com/
Used it in CSS as below:
font-size: 12px;
enter code here
-webkit-border-radius: 5px; /* Chrome */
position: relative;
z-index: 1;
border-radius: 5px; /* CSS3 */
-moz-border-radius: 5px; /* Mozilla */
behavior: url(http://dev.intervalorders.com/pie/PIE.php);
border-radius isn't supported by IE8: http://caniuse.com/#feat=border-radius
Internet explorer does not support border-radius. But you can achieve it by implementing some hacks. Check this link for help.
Why everyone wrote "border-radius isn´t support in IE or in IE8" etc..? IE9 support border-radius and lower version of IE support border-radius with PIE and this theme is about PIE not about default support border-radius in IE8 or older.
And answer on question:
-webkit-border-radius: 6px 6px 6px 6px; // simply "6px" is ok too as in another CSS function
-moz-border-radius: 6px 6px 6px 6px; // simply "6px" is ok too as in another CSS function
border-radius: 6px 6px 6px 6px; // simply "6px" is ok too as in another CSS function
behavior: url(funkce/PIE.php); //change link on your local folder where you have PIE.php (in this file is include PIE.htc that alow you use PIE without change .htacces file. For that you must have PIE.php file and PIE.htc file too.)
I've been researching on drop-shadow-effect technique for web design.
So, I would like to apply the technique to use implementing a top header bar for my website.
From my findings, the one that people out there use the most is box-shadow css property.
I'd like to know if this is the most effective yet simple way to achieve the desired outcome or not. any other options available for me to implement the same as well as their pros and cons?
any advice would be very much appreciated?
Simplest way is Photoshop :)
Otherwise, read on: http://www.css3.info/preview/box-shadow/
box-shadow is a CSS3 property, meaning it's not available in < IE9, and not natively available in most browsers, hence the proprietary prefixes:
Sample CSS code for IE drop shadow:
filter:progid:DXImageTransform.Microsoft.Shadow(color='#000000',direction='120',strength='20');
CSS3 version:
element {
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
-o-box-shadow: 10px 10px 5px #888;
-khtml-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}
The only other option to the CSS3 box-shadow property is to use images. CSS3 box shadows are easier to apply and require less page weight (kb) to use. However, not all browsers will support CSS3 box-shadows.
If using the box-shadow property be certain to set all the various properties for different browsers.
box-shadow: 1px 2px 3px #000;
-moz-box-shadow: 1px 2px 3px #000;
-webkit-box-shadow: 1px 2px 3px #000;
-o-box-shadow: 1px 2px 3px #000;
-khtml-box-shadow: 1px 2px 3px #000;
Here is my link: link text
The shadow on the slider looks great in safari, firefox, etc., but how do I make it look the same in IE?
Here is my current CSS code:
-moz-box-shadow: 0px 0px 6px #666;
-webkit-box-shadow: 0px 0px 6px #666;
box-shadow: 0px 0px 6px #666;
Try this it works in IE 6+ too
.shadow { zoom:1; /* This enables hasLayout, which is required for older IE browsers */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#b0b0b0', Direction=135, Strength=3);
-moz-box-shadow:2px 2px 2px #b0b0b0;
-webkit-box-shadow:2px 2px 2px #b0b0b0;
box-shadow:2px 2px 2px #b0b0b0;}
You can try CSS3PIE, it adds a bunch of CSS3-isms to IE. CSS3PIE usually works but not always and there is a bit of a performance hit. You might have to deal with "haslayout" hacks but a bit of googling should help with those.
There are a few similar things kicking around but I've only used CSS3PIE.
My opinion is better you use shadow images so that it works fine in IE too....
Is it possible to remove a style in the case that browser specific CSS 3 items (drop shadows, rounded corners, etc.)? For example:
.fancy
{
/* only display if no drop shadow support */
border: thin solid #888;
box-shadow: 0px 1px 4px #888;
-webkit-box-shadow: 0px 1px 4px #888;
-moz-box-shadow: 0px 1px 4px #888;
}
It's better if you don't remove style rules, but only apply them when CSS3 is enabled. You could use this fancy piece of Javascript for it, called Modernizr.
Let me give you a quick example of how you could use it in your stylesheet:
.boxshadow .fancy {
border: thin solid #888;
box-shadow: 0px 1px 4px #888;
-webkit-box-shadow: 0px 1px 4px #888;
-moz-box-shadow: 0px 1px 4px #888;
}
Modernizr adds classes to the HTML element, which tells you what browser functionalities are enabled.
CSS doesn't do conditionals. In any version.
What you can do is dynamically serve up different stylesheets for browsers that support CSS3.
Since CSS3 is style-markup, and not a programming language, you can't do true "if-else"--however you could design your CSS3 styles to override the CSS2 styles, and the end result would be CSS3 where supported with CSS2 as a fallback.
In terms of practicality however, this approach will likely be more painful than dynamically serving CSS3 stylesheets to supported browsers.
One means -though given the patchy nature of css adoption/implementation it might/will not work exhaustively- is to use:
.fancy
{
border: thin solid #888;
}
.fancy:nth-of-type(odd), .fancy:nth-of-type(even)
{
border: 0 none transparent;
box-shadow: 0px 1px 4px #888;
-webkit-box-shadow: 0px 1px 4px #888;
-moz-box-shadow: 0px 1px 4px #888;
}
This is a bit messy in that the selector has to explicitly target all the odd and even .fancy elements, I'd prefer a neater solution but it does work (certainly in Chrome/Linux). Demo at: http://jsbin.com/ezako3