I think I have tried different methods suggested all over the internet but nothing worked. This is my current css code:
div {
cursor: url(images/zoomin.cur), auto;
}
It works fine except in IE...
Unfortunately, cursor is plain buggy in IE, at least until and including 8
In Internet Explorer for Windows up to and including version 8, if a
relative URI value is specified in an external style sheet file the
base URI is considered to be the URI of the document containing the
element and not the URI of the style sheet in which the declaration
appears.
http://reference.sitepoint.com/css/cursor
You may want be able to use a conditional comment to target IE and then feed it a modified style rule with a different url.
I solved in this way for the grab cursor in Internet Explorer, citing the #JasonGennaro's answer:
In Internet Explorer for Windows up to and including version 8, if a
relative URI value is specified in an external style sheet file the
base URI is considered to be the URI of the document containing the
element and not the URI of the style sheet in which the declaration
appears.
.grab_cursor {
cursor: grab !important; /*Without !important the .cur-file property below will overwrite this and browser will show default cursor*/
cursor: -moz-grab !important;
cursor: -webkit-grab !important;
cursor: url('../img/cursors/openhand.cur'), url('img/cursors/openhand.cur'), n-resize; /* standard: note the different path for the .cur file */
cursor: url('img/cursors/openhand.cur'), n-resize\9; /* IE 8 and below */
*cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 7 and below */
_cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 6 */
}
Files tree:
index.html
css/style.css -> here the posted code
img/cursors/openhand.cur
Good references:
One
Two
Three
Working Demo:
Demo
Because different browsers treat relative URI's differently, the cursor style allows a list of urls. You can have one path that works for IE and one that works for other browsers:
div {
cursor: url('app/images/zoomin.cur'), url('zoomin.cur'), auto;
}
In my setup, the first url works for IE11 (and earlier) because the script that uses the cursor is in 'cgi-bin/app' while the .cur and .css files are in 'app/images'. IE uses the document location as the base, so I need to add more path information to locate the cursor file. The second url works in Firefox because .cur and .css are in the same location and Firefox uses the .css location as the base, so additional path info is not needed.
From msdn documentation:
url(uri)
Internet Explorer 6 and later. Cursor is defined by the
author, using a custom URI, such as url('mycursor.cur'). Cursors of
type .CUR and .ANI are the only supported cursor types.
from : http://www.w3schools.com/cssref/pr_class_cursor.asp
The cursor property is supported in all major browsers.
Note: Opera 9.3 and Safari 3 do not support URL values.
Note: The value "inherit" is not supported in IE7 and earlier. IE8
requires a !DOCTYPE. IE9 supports "inherit".
To work in IE you need specify full path to CUR file. E.g.:
html {
cursor: url("../img/cursor.png"), url("http://www.example.com/dist/assets/img/cursor.cur"), default;
}
this one work for me proved in IE10, INDEXED in the of index.html( you must use absolute routes)
<style type="text/css">
.container{
cursor: url(http://path/of/folder/image.cur), default !important;
}
</style>
I also faced curser pointer rendering problem in IE. Below are my solutions.
There is 2 things which you need to make sure.
Curser file should be .cur or .ani files.
You need to give full url image path. i.e.http://abc.in/static/images/demo.cur
You can face a problem of curser origin start position. SO you can solve that problem by using https://www.cursor.cc. website.
it has an check box of hotspot (where the mouse clicks) by using you can decide your pointer position.
Hope all pointer problem can be solve by above details.
I tried using .ani and .gif and it is working. It should go like this:
body {
cursor: url(images/dog.ani), url(images/dog.gif), progress !important;
}
This css works for my website in chrome, firefox and IE.
Related
For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS:
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
But are those styles hardcoded or is merely adding a prefix address that browser?
For example, if I want to change the margin only in Firefox could I simply add the prefix like so:
-moz-margin:-4px;
margin: 1px;
NICE TO KNOW:
And if that's possible is it possible to address a specific version or platform? For example, -moz-4.3-margin:-4px; not that I'd want to, just wondering.
And does the prefix approach work cross browser? I'm wondering because Internet Explorer.
Finally, will margin:10px ever knock out -moz-margin:10px? As in, "We, Mozilla, finally support margin so we are going to ignore all old -moz-margin tags and will just use the value in the margin tag".
It's very bad habit to apply css for specific browser. But there are solutions also:
Only Moz:
#-moz-document url-prefix(){
body {
color: #000;
}
div{
margin:-4px;
}
}
chome and safari:
#media screen and (-webkit-min-device-pixel-ratio:0) {
body {
color: #90f;
}
}
Below IE9:
<!--[if IE 9]>
body {
background:red;
}
<![endif]-->
I recommend don't use this moz, and safari prefix untill and unless necessary.
For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS
No, that isn't how it works.
Vendor prefixed properties are used for experimental features. Either because the specification for the property hasn't been locked down or because the browser implementor knows their are problems with the implementation.
In general, you shouldn't use them in production code because they are experimental.
Support for the vendor prefixed versions is removed as support stabilises.
Is there a way to set any style for a specific browser in CSS?
There are several methods that have been used for that effect.
Parser bugs
By exploiting bugs or unsupported features in specific CSS engines (e.g. some versions of IE will ignore a * character on the front of a property name while other browsers will (correctly) discard the entire rule).
Conditional comments
Older versions of Internet Explorer supported an extended HTML comment syntax that could be used to add <link> or <style> elements specifically for certain versions of IE.
Support for this has been dropped.
JavaScript
Classes can be added to elements (typically the body element) using JavaScript after doing browser detection in JS.
As far as I know, prefixes were added to properties when CSS3 was being implemented by different browsers, and just property wouldn't work so we'd use -prefix-property for certain properties like gradient or border-radius. Most of them work without the prefix now for most browsers, and the prefix system has been kept only for backward compatibility.
For example, if I want to change the margin only in Firefox could I simply add the prefix like so:
-moz-margin:-4px;
margin: 1px;
This won't work. You can, however use different stylesheets for different browsers (say IE) in this manner:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
The browser-specific prefix version thing doesn't exist.
Hope this answers your question.
As a workaround you can detect browser version in JS, and add it to class of your root element. You can detect browser through user agent , and there are multiple libraries in npm.
Using this class as a base, you can target browsers
function detectBrowser() {
if (navigator.userAgent.includes("Chrome")) {
return "chrome"
}
if (navigator.userAgent.includes("Firefox")) {
return "firefox"
}
if (navigator.userAgent.includes("Safari")) {
return "safari"
}
}
document.body.className = detectBrowser()
p {
display: none;
}
.safari .safariSpecific, .firefox .firefoxSpecific, .chrome .chromeSpecific {
display: block
}
My Browser is
<p class="chromeSpecific">Chrome</p>
<p class="firefoxSpecific">Firefox</p>
<p class="safariSpecific">Safari</p>
I am developing a web site and have optimized it for Firefox and Chrome. The project contains a style sheet called base.css which is included in all the pages, and which contains some global settings and definitions, including a list of variables which I use to store color values like such:
:root {
--yellow-1: #fff8e3;
--yellow-2: #ffe9a9;
}
and so on, and calling them like for example:
.a-class {
background-color: var(--yellow-2);
}
When I look at the page in Edge, all the colors are missing, and when I use the DOM explorer, it marks all uses of the variables with red underlines. Does Edge not support CSS variables in this way? What can I do to work around this?
MS Edge does support CSS variables from EdgeHTML v15:
https://blogs.windows.com/msedgedev/2017/03/24/css-custom-properties/
This is also backed up here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables#Browser_compatibility
The syntax is as follows:
Declaring a variable:
element {
--main-bg-color: brown;
}
Using the variable:
element {
background-color: var(--main-bg-color);
}
I had the same problem, but I defined variables with opacity. In Chrome it worked fine, but in edge it didn't. After I removed opacity from declarations, it worked fine in Edge as well.
I tried isolating the problem, and it seems there were no problem with this in Edge. Normal CSS works works as supposed to.
When selecting browser prefix elements like:
::-ms-track
::-ms-fill-lower
::-ms-fill-upper
::-ms-thumb
Variables does not work on theese.
I mean to change my cursor pointer to a custom cursor.
I saw this topic but it wasn't of any help: "html, css - cursor - how to change default image for pointer".
Is there any way I can use CSS to resolve this issue, b/c I'm not allowed to use JavaScript on someone else's website where I am configuring my profile on. I can only use CSS Markup and HTML Markup.
There can't be a way to use JS in the CSS Markup, right?
You can use this:
.custom {
cursor: url(images/my-cursor.png), auto;
}
But I wouldn't recommend it due to browser incompatibilities. Credit to Chris Coyier / CSS-Tricks
http://css-tricks.com/almanac/properties/c/cursor/
You can use this solution cross-browser which is suitable for Webkit(Chrome, Safari, etc), Gecko (Mozilla, etc) and IE8+ as well:
a.heroshot img {
cursor:url(http://alienbill.com/kirkdev/magnify.cur), pointer;
cursor:url(http://alienbill.com/kirkdev/magnify.cur), -moz-zoom-in;
}
Check this demo:
http://jsfiddle.net/a_incarnati/cbz9xkjv/
You should opt for using .cur files instead of images for replacing the cursor via CSS because .cur files are supported even from IE6. On the contrary if you use images you will have cross-browser issues.
In IE 8, I am seeing the alt text getting displayed in the print preview when the image is not getting displayed.The issue is not occurring in chrome. I want to fix this issue in IE 8.
Src of the image gets added in run time. At some times images will not be available from the server
<img src="null" alt="weird issue">
Needed a fix without using javascript
You can't style the alt text directly, but it will inherit from the img parent so probably the easiest is to simply set the color of your img to white in the CSS (and if for print applications, then within your print styles).
Try this:
img{
color: #fff;
background-color: #fff;
}
In that example, I've also set the background-color to white but this probably isn't 100% necessary given that if this is a print style, the background will inevitably be white anyway.
As has been mentioned in the comments below this answer, you may be able to use a CSS attribute selector to only target those imgs that have 'null' as their source.
This would work like this:
img[src="null"]{
color: #fff;
background-color: #fff;
}
This would, however, come with a few additional requirements/assumptions:
That the src is indeed 'null', and not just an ampty string (in which case you could use img[src=""]).
CSS attribute selectors work in IE7 and up. However, IE7 and IE8 are a little delicate to !DOCTYPE declarations so you have to ensure that your page has a valid !DOCTYPE declared.
Older browsers (IE6, for example) will not support this, so you'll still get the alt text come through.
Assumes that a CSS resolution is actually what you're asking for, and - as before - that the background the image sits on is indeed white!
You could extend upon ths use of attribute selectors to simply ensure that those images coming through with src="null" aren't displayed at all:
img[src="null"]{
display: none;
}
For mozilla : study this code and find a way to achieve it with other browsers.
img:-moz-broken:before,
input:-moz-broken:before,
img:-moz-user-disabled:before,
input:-moz-user-disabled:before,
img:-moz-loading:before,
input:-moz-loading:before,
applet:-moz-empty-except-children-with-localname(param):-moz-broken:before,
applet:-moz-empty-except-children-with-localname(param):-moz-user-disabled:before {
content: -moz-alt-content !important;
unicode-bidi: -moz-isolate;
}
Or, some absolutely basic inline javascript, some verry ugly old-school inline event handler:
<img src="broken.png" onerror="this.style.display='none'" />
I have a page which uses the AlphaImageLoader CSS filter for IE8 like so:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/thing.png', sizingMethod='scale');
In my test IE8 (Windows XP, factory settings), everything is fine. The client however received a screenshot from someone claiming to be also using IE8 which looks like the browser completely ignores the filter directive. All other styles in the IE-specific stylesheet loaded via conditional comments appear to be working. Is there any setting in IE or in Windows which would be causing this?
Thanks, Simon
IE8 replaced filter with -ms-filter.
If you want to support all versions of IE, you need to provide both of these styles.
The syntax for -ms-filter is slightly different to filter as well:
All filters are now specified with their full progid string (as per your example, but some filters could previously be specified with a shorter syntax).
The value for -ms-filter must be enclosed in quotes. This is to prevent it from being invalid CSS syntax (since it contains a colon after progid it is invalid CSS; in bad cases has been known to cause parsing errors in other browsers that stop them from reading the rest of the CSS file properly).
So in your example, you need the following styles:
.myelement {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/thing.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/thing.png', sizingMethod='scale')";
}
Note that IE9 has dropped support for both filter and -ms-filter, in favour of the equivalient standard CSS3 properties.
Hope that helps.
This simple test case: http://fiddle.jshell.net/TyMxr/show/light/
<div></div>
div {
border: 2px solid red;
width: 256px;
height: 256px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.gravatar.com/avatar/74c04b6c96836f044ed927a5db4dc92b?s=128&d=identicon&r=PG', sizingMethod='scale');
}
works in IE6, IE7, IE8, IE9, and Quirks Mode in any of those versions.
I can't think of any reason this wouldn't work in IE.
Do you have a test page to look at? I think something else must be going on.