getComputedStyle fails to get text-decoration property inherited, but can get font-size.
Failed in Firefox 25 and GoogleChrome 30.
Note: In Internet Explorer 10 work!
<!DOCTYPE html>
<html>
<style>
#parent
{
font-size: 38px;
text-decoration: underline;
}
</style>
<body>
<div id="parent">
<p id="child">Test</p>
</div>
<script>
var elem = document.getElementById("child");
document.write("text-decoration:"+window.getComputedStyle(elem).getPropertyValue("text-decoration"));
document.write("<br>");
document.write("text-decoration:"+document.defaultView.getComputedStyle(elem).getPropertyValue("text-decoration"));
document.write("<hr>");
document.write("font-size:"+window.getComputedStyle(elem).getPropertyValue("font-size"));
document.write("<br>");
document.write("font-size:"+document.defaultView.getComputedStyle(elem).getPropertyValue("font-size"));
</script>
</body>
</html>
It is a fault of mine, or browsers that failed?
text-decoration isn't supposed to inherit, even though the parent text decoration affects the child text. This is unlike font-size, which does inherit.
That being said, this definitely looks like an IE bug. While window.getComputedStyle() is reporting in IE10 as inherited, it's interesting to note that the F12 developer tools say otherwise.
References:
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
http://reference.sitepoint.com/css/text-decoration
Related
I’m trying to find an image that has a src that starts with a particular url and hide it. I can do it but it doesn’t work on IE.
Is there a version of this css (maybe javascript) that will also work for edge and IE
img[src ^= "https://www.google"]{
display: none;
}
Use this CSS3 attribute selector:
img[src*="hideme"] {
display: none;
}
As usual, some versions of IE are known to have bugs with CSS3 attribute selectors. The SitePoint Reference is useful: Link
Below is the example tested with IE 11 and MS Edge browser version 44. In both and other browsers the code is working fine.
<!DOCTYPE html>
<html>
<head>
<style>
img[src*="i.postimg.cc"] {display: none;}
</style>
</head>
<body>
<img src="https://i.postimg.cc/13D5v67n/223.png" alt="Trulli" width="500" height="333">
</body>
</html>
Reference:
Hide image of specific size, by CSS? (Refer the accepted answer in the thread.)
I am working in a huge application where most things are hard coded badly using javascript/jquery (especially the heights & widths of lot of components).Most has its element.style property rendering some width and height from somewhere.
element.style {
width: 1566px;
height: 425px;
}
Is there a way of inspecting that to find that "this width and height" is from "this script file" and "this line"? just like the css source map which points out the partials from which individual styles are applied? Any browser plugins of any sort that can do the tricks as far as script debugging is concerned ?
Any info would be of great help!
[EDIT]
I have tried the options posted below.! Posting a sample replica as well.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<link rel="stylesheet" href="reset.css" />
<style type="text/css">
.bg{
background-color:blue;
}
body,html{
height:100%;
}
body{
min-height:100%;
}
</style>
</head>
<body class="bg">
</body>
and in app.js
$(document).ready(function(){
$(".bg").width(1566);
$(window).resize(function(){
$(".bg").width(1800);
})
})
Screenies here :)
Setting breakpoint
Pointing to jquery.min.js instead of app.js line number
This may not directly answer your question but I feel it may help you.
In chrome there's a handy "break on attribute change" setting that you can toggle on any element.
Open web inspector, right click any element, choose "Break on" > "Attribute Change".
Hope it helps!
EDIT:
To elaborate further, right click any element in Chrome and choose "Inspect Element".
When the developer tools open, the element you right clicked will be highlighted.
Right click this highlighted element and choose "Break On" > "Attribute Change".
If any JS modifies any attributes on this element, your code will break and reveal the line that updated the attribute in the dev tools for you.
See below image for reference:
I would like to set a height for a div only for one browser, so it doesn't look weird in Firefox or whatever.
Here is an example:
#example {
height: 200px; <!--How can I target Safari for example?-->
height: 250px; <!--How can I target Firefox for example?-->
height: 300px; <!--How can I target IE for example?-->
width: 250px;
background-color: #FFF;
}
<div id="example">
<img src="example.png">
<p>Just some text.</p>
<p>Click here to visit www.example.com</p>
</div>
I've already tried -moz-height: 250px; but it didn't work.
navigator.appName
it will return always the same value for all browsers. I've tested on Firefox, Chrome, and Safari all browsers show Netscape. But if you want to target specific browsers you can use this code
Firefox navigator.userAgent.includes("Firefox");
Safari navigator.userAgent.includes("Safari");
Chrome navigator.userAgent.includes("Chrome");
You can use conditional comments. So you tell the code to use a certain stylesheet for a particular browser. Here's an article about it.
Here's an example:
<link rel="stylesheet" href="normal_style.css">
<!--[if IE]><link rel="stylesheet" href="ie_style.css"><![endif]-->
Note: this only works with Internet Explorer. If you want to do it for some other browser you need to use JavaScript. Here's an example of JS:
<link rel="stylesheet" id="stylesheet" href="normal_style.css">
if (navigator.appName === "Mozilla Firefox") {
document.getElementById("stylesheet").setAttribute("href", "special_style.css");
}
You can access the navigator object and get the browser.
var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;
Then
document.getElementById("example").style.height= y;
"y" it is a variable whose value changes depending on the browser.
For this, you can use JavaScript. There is a string that you can access called navigator.appName. You can just put this:
if(navigator.appName === "Google Chrome")
// Do whatever here
replacing Microsoft Internet Explorer with your target browser.
I really hope this helps!
I have the following example:
<style type="text/less">
#bg: black;
#fg: white;
body {
background-color: #bg;
color: #fg;
}
</style>
<script type="text/javascript" language="JavaScript"
src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.js">
</script>
<title> test </title>
</head>
<body>
test
<script type="text/javascript" language="JavaScript">
alert("test");
</script>
</body>
</html>
It shows a JavaScript alert and white text on black ground in Firefox, Chrome and Opera. For some reason, it does not work in IE11: The alert is being shown, but the LESS parsing does not happen. I made the IE11 Developer Tools break on all exceptions, but nothing seems to go wrong.
The alert is here because I was worried that Internet Explorer might not be executing scripts at all, but this is clearly not the case.
Btw, I also tried this with the earlier version
https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.min.js
instead of the one from cdnjs.cloudflare.com, no luck either.
As far as I know, LESS should be supported on IE11. I would be very grateful if anyone had any idea why it is not working.
Edit It seems like this may be a problem with my internet explorer configuration. I am on a Windows 2008 R2 machine with all my Internet Explorer settings at default.
Place your LESS code after the <script>tag.
<script type="text/javascript" language="JavaScript"
src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.js">
</script>
<style type="text/less">
#bg: black;
#fg: white;
body {
background-color: #bg;
color: #fg;
}
</style>
<title> test </title>
If you place it before you include less.js the browser doesn't know what to do with that piece of code. That is why it doesn't get parsed.
Another approach: remove language="JavaScript" on all <script> tags as the attribute has been deprecated.
What I want is specify cursor:pointer for the whole body tag, so the background of the page is clickable, but I also want the remainder of the page to work as it did, so I try setting cursor:auto for div, which contains the page.
In FF, Chrome and safari it works fine, also in IE 6 and 7. But it seems that IE 8 and 9 and also (screw it) OPERA have their own opinion on what cursor:auto means.
Here is a snippet to see what happens:
<!DOCTYPE html>
<html>
<head>
<title>Cursor test</title>
</head>
<body>
<div id="newBody" style="width:400px; height:300px; cursor:pointer; background:#ffddee; border:2px solid #ddaa66;">
<div id="pageContent" style="width:200px; cursor:auto; background:#fff;">
<p>This is a paragraph click here.</p>
</div>
</div>
</body>
</html>
Although this is an HTML snippet everything is done with javascript with the same outcome.
The standard says something really vague: The UA determines the cursor to display based on the current context. , also these pages didn't help on the issue
http://www.w3.org/TR/CSS2/ui.html
http://msdn.microsoft.com/en-us/library/aa358795%28v=vs.85%29.aspx
http://www.w3schools.com/cssref/pr_class_cursor.asp
https://developer.mozilla.org/en/CSS/cursor
Can anyone explain this behaviour or know a possible way around it?
Use CSS:
#pageContent {cursor:default}
#pageContent * {cursor:auto}
The cursor still ends up always being 'default' in IE, but at least other browsers display the expected behaviour.
I think auto is inheriting the parent style (not sure), I tried cursor:default; and It worked fine in IE 8 and FF 3.6.
<div id="newBody" style="width:400px; height:300px; cursor:pointer; background:#ffddee; border:2px solid #ddaa66;">
<div id="pageContent" style="width:200px; cursor:default; background:#fff;">
<p>This is a paragraph click here.</p>
</div>
</div>