Detect :first-child support - javascript

How to detect, using JavaScript, if the browser supports the CSS :first-child selector?

You could just use that :first-child rule to set some specific value, and then get the computed style in Javascript to see if the :first-child rule is applied, e.g.
<style>
#foo { width: 200px; }
#foo:first-child { width: 400px; }
</style>
<span><span id="foo"></span></span>
<script>
if ($('#foo').width() < 400)
alert('first-child not supported.');
</script>
(This is not tested. I have no IE 6.)

I don't think there is a jQuery function to find out support for this. I expect if it does exist, it is going to be quite complicated. Are you really sure you need this? Care to share why?
If you can use jQuery anyway, why not add a jQuery statement to assign the class/property/whatever to the desired element, instead of relying on CSS?
As a "manual" answer, looking at the quirksmode.org compatibility table, the selector is fully supported in all modern browsers except the IE family which seems to have problems even in IE8.

Related

issue with jquery .css() and getting brifed css of style Attribute

i want to add style to an element using css() and save it
first step works fine but when i want to save it the code that jquery gives me is too detailed
for example
<div id="d"></div>
$('#d').css("border-radius","55px");
and
alert($('#d').attr('style'));
gives
border-top-left-radius: 55px;
border-top-right-radius:55px;
border-bottom-right-radius:55px;
border-bottom-left-radius:55px;
is there anyway to get less detailed code like
border-radius:55px
?
I think you can see it by:
$('#d').css("border-radius");
Or may be
$('#d').attr("style");
try something like this
alert($('#d').css(border-radius'));
I tested this in Firefox and I got:
border-radius: 55px 55px 55px 55px;
In other browsers tested I got what you wrote. The output appears to be browser-specific - if you inspect the element in the DOM, even there it's already written differently in Firefox than the other browsers I tested (Safari, Chrome, Opera all write the explicit, extended definition).
Also found this, although in a different context:
Different browsers may return CSS color values that are logically but
not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).
http://api.jquery.com/css/
In conclusion, if you want the style definitions in a specific formatting, you will have to do something like regex-replacing on the string that attr('style') returns. Hope this helps.
try this
alert($('#d').attr('style'));
I ended up with different method by capturing all input[type=text] where i set value of properties ,there i can have full control on output

Alter CSS rule definition using jQuery

Let's say you want to change the width of many elements, to simulate a table, for example. I realize you could do this:
$(".class").css('width', '421px');
This alters the inline style='width: 421px;' attribute for each element. Now, what I'd LIKE to do: is change the actual CSS rule definition:
.class {
width: 375px; ==[change to]==> 421px;
}
When it comes to 100's if not 1000's of nested <ul> and <li> that need to be changed, it seems like this would be better for performance than trying to let jQuery do the work through the .css() method.
I've found this example - this IS what I'm trying to do:
var style = $('<style>.class { width: 421px; }</style>')
$('html > head').append(style);
I'm NOT trying to swap classes ($el.removeClass().addClass()), because I can't have a class for EVERY optimal width (379px, 387px, 402px..).
I could create a <style> element and dynamically set the width, however I'm thinking there's a better way.
document.styleSheets[0].addRule works in Chrome, 'not a function' in FF
What works for me is to include an empty style block in the header:
<style id="custom-styles"></style>
And then manipulate that with something like this:
$('#custom-styles').text('h1 { background: red }')
I've tested this appears to work in current version of Chrome (well, Chromium - 63.0) and Firefox (57.0.4).

CSS pseudo class won't work when normal class is set from javascript, under FF

I have p.first_p:first-letter in my stylesheet, as I checked, it works well when class first_p is set in HTML. Problems start when I use javascript to find elements and then set their class.
Under Chrome and Opera it works fine (I need to check IE 8 and 9, and FF3).
FF 5.01 changes the class, but still pseudo class setting doesn't affect the element.
It seems that FF needs to 'refresh' css settings of element before pseudo class starts working, so I made rather dirty workaround - script replaces affected node with its clone.
Is there a better way to solve that issue? Some way to make FF recalculate everything it knows about node? Also that workaround isn't enough for IE 7.
Edit: yeah, pseudo-element not pseudo-class, my bad
It is definitely a bug. A possible work-around would be changing the display style of the element. Unfortunately, this needs to be done delayed, after the previous style change applied:
element.className = 'first-class';
element.style.display = 'inline';
setTimeout(function(){
element.style.display = '';
}, 0);
Demo: http://jsfiddle.net/pvEDY/3/
You're running into https://bugzilla.mozilla.org/show_bug.cgi?id=8253
Is it possible to not use javascript?
I'm guessing that you're applying first_p to the first paragraph of particular elements.
It possible for you to use the :first-child selector instead?
I'm not sure if this will work, but you could try something like the following, assuming you want to apply this to children of divs with class "copy"
.copy p:first-child:first-letter{
color: #abcdef; /* or whatever */
}
this definitely works and you don't need javascript, except for crappy old IE.
Alternatively you could try this:
.element p:first-letter{
font-size: 20px;
}
.element p + p:first-letter{
font-size: inherit;
}
This css makes any paragraph that is not preceded by another paragraph have a styled first letter. Would that solve your problem?
Wait, you want it to work in Firefox. Try this:
.element p:first-of-type:first-letter{
font-size: 20px;
}
It selects the first matching element. The :first-of-type pesudo-element is supported by Firefox, Opera, Chrome and Safari according to SitePoint's page for :first-of-type

Detecting CSS capabilities with Javascript

Is it possible to detect CSS support by using Javascript?
For example, is it possible to detect if the browser supports attribute selectors like this?
input[type='text'] { }
Modernizr is designed to detect browser features and may well be able to help in this instance.
http://www.modernizr.com/
This is a bit speculative as I haven't tested it out, but I believe it would be possible via JS to add a style element followed by an element that it has an effect on, and then test the values:
Speculative untested code, may or may not work (jQuery used for brevity):
$('<style type="text/css" id="foo">input[type="text"]{ width: 10px; }</style>').appendTo('head');
$('<input type="text" id="bar">').appendTo('body');
if ($('#bar').width() == 10)
{
//attr selector supported
}
$('#foo, #bar').remove();
document.querySelectorAll("input[type='text']")
But that fails for older browsers, naturally.
Other than that, you could just use the style property to check if a certain CSS property has been applied or not.
input[type='text'] {
background-repeat: no-repeat; /* or any other irrelevant, non-default value */
}
and
if (myInputElem.style.backgroundRepeat == "no-repeat") {
// selector is supported
}

Disable grey border on anchor (<a>) elements on focus

I am trying to make the ugly grey border that appears around anchor tags go away. The CSS property outline:none; works for Firefox, but how can I do it in IE? Preferably using CSS expressions or jQuery. I'm not worried about accessibility BTW.
Based on your suggestions I found these to be the best solutions:
The jQuery (for IE browsers):
$('a').focus(function() {
$(this).blur();
});
Another jQuery option (for IE browsers only):
$('a').focus(function() {
$(this).attr("hideFocus", "hidefocus");
});
The CSS (for all other browsers that force an outline):
a {
outline: none;
}
Note: Some browsers such as Google Chrome don't force an outline on focus.
Unfortunately I think hideFocus is your best answer as blur isn't always appropriate:
...
http://msdn.microsoft.com/en-us/library/ms533783(VS.85).aspx
It sounds like you're talking about the dotted border that appears when you tab through links. You have the correct solution for Firefox (outline: none in the CSS). The best solution I've used for IE is to add an onfocus listener that removes focus:
link
Take a look at this site for an example of how you might do it globally: http://codylindley.com/Javascript/223/hiding-the-browsers-focus-borders-should-i-shouldnt-i
Unless I'm missing which dotted border is being discussed, outline:none works in Internet Explorer 8 (at least, for me). Rather all of a sudden some hyperlinks were rendering with a dotted border (the only attribute I remember changing is display:inline on an h2 element that contained a link, afterwards the dotted border appeared). So I threw in a { outline:none; } in my global stylesheet and poof, no more border in IE8!
For IE, you can use Javascript like this:
Click Here
Read more:
http://www.htmlgoodies.com/beyond/javascript/article.php/3471171
For Firefox and Safari, outline:none works.
Read more:
http://css-tricks.com/removing-the-dotted-outline/
Does this not work?
a
{
border: 0;
}
a {outline:noneIE 8} css seems to work well on Firefox, Chrome and IE 8.
a {
outline: 0 none !important;
border: none;
}

Categories

Resources