I had initially noticed both of these work when using the jQuery css method and thought it had something to do with jQuery, but then I realized both of them were (apparently) valid aliases for the same CSS property anyway.
What's with that? I can't find it documented ANYWHERE. Every site just mentions one or the other and nobody discusses that it has two names.
I haven't tested it, but I would assume it works the same way for the other three margins. And this opens up the possibility that many different CSS properties have aliases. Is this true, and if so, is there any sort of reference for what the various aliases might be?
Note: when using 'margin-top' with jQuery, it has to be formatted as a string and not as a symbol because of the hyphen, a.k.a. just use quotes around it.
From the jQUery documentation
Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both .css( "background-color" ) and .css( "backgroundColor" ).
margin-top is the CSS syntax, marginTop is the DOM syntax.
Related
I am trying to find what is overriding my CSS element using chromes element selector but am unable too.
This answer seems outdated I can't find how to access "computed styles":
Chrome Developer Tools: How to find out what is overriding a CSS rule?
I don't know why this color is overridden with gray:
chrome
How can I find whats doing it with google chrome?
If you look at the image, it will tell you that the property is changed in the element.style.
In other words, the change is not applied using a selector such as class or id, but rather to the element itself.
This can be done in two ways, as far as I am aware.
1) In HTML, writing the properties directly within the element:
<div style="color:gray;"></div>
2) In Jquery, referencing the specific object (for example, using the id property) and then using the css property:
$('#divname').css({
color:gray;
});
With regard to finding what is causing the issue:
1) Finding out if the change has been made in HTML should be fairly straightforward, as you would just need to have a look at the HTML file.
2) If the change has been made through Jquery, things get a little more complicated: a ghetto method would be to search your script files for the "gray" string. Don't forget that scripts can also be embedded into HTML, however, looking for the property the HTML file would be a good way to proceed :)
Normally I can get around the fact xpages hijacks the id-attribute on fields etc by using the x$ jQuery selector...
However, I'm building a sylesheet using the #print media query to make a normal form into a pretty version when printed. I have a scenario, where I have a custom control, have given it an ID of GuidanceArea, and under normal circumstances would be able to reference it in my style sheet with #GuidanceArea, just to simply hide it for example for this scenario.
However this isn't working, I assume because of the ID hijacking? It's not too much of a big deal, as I have workaround where for all elements I don't want to print I just append no-print to the elements styleClass and have .no-print set to display:none in my #media print within the style sheet.
However out of curiosity more than anything, I wondered if there's an easy way to get a hold of an elements ID for use in CSS?
The short answer: don't
The longs answer: JSF and XPages manage the id attribute to ensure it is unique on a page. So you don't have actual knowledge what it will be.
The easiest way is to use the class attribute to mark the element of interest, so your selector would be .someclass instead of #someid
But if you absolutely have to: use an XPages output element to send a piece of computed inline css where you use expression language to obtain the actual id. Browsers or libraries might cough on the : in the id, so your result requires lots of testing. VanillaJS should work.
I have been reading this article about HTML5 Custom Element.
It said I need to register the element's name before using it like:
var XFoo = document.registerElement('x-foo');
document.body.appendChild(new XFoo());
Then I can start using it normally:
<x-foo>...</x-foo>
But I just tried using it without registering in Chrome, Firefox, and IE11. All seems to render just fine, even CSS selector for x-foo also works.
I'm guessing that we no longer need to register since most browsers have supported it?
Thanks
Short answer: No.
As a good practice, always define things that are not official. Just because it works by all/most browsers does not make it correct. That would be similar to using a variable which is yet to be defined, and then the compiler automatically defining it. Sure, it works, but that does not make it right
No, and document.registerElement isn’t even supported widely. It is experimental technology, work in progress.
Browsers traditionally treat unknown element names as specifying elements that have generic properties of HTML elements but no default functionality and no default rendering (the content is rendered according to its own rules). However, old versions of IE ignore an unknown element name in CSS unless you introduce it with code like
<script>document.createElement('x-foo')</script>
Using registerElement is useless for such purposes, since it is not supported by IE.
If you use registerElement, you should take caution, since calling it causes an error and script termination in many browsers. So you would need code like
if('registerElement' in document) {
var XFoo = document.registerElement('x-foo');
...
}
I am using SEO analyzer, and it tries to make me crazy.
It says that the page has inline css. I have external css, which lists reused styles, but I do not see value to put once-used "style" stuff into this sheet so I leave them in html. I particularly curious about width and height css properties, which I define for images. Why this SEO analyzer does not check for uniqueness of styles?
The value in using groups of styles that you only use once is that you may find later on that you may have to use it more than once. If you already have the appropriate set of rules, it's a simple matter of using the stylesheet selector. It also makes it easier to update later on since the styles are in a canonical place in the CSS rather than a random place in the html.
As for width/height on <img>, these should be done via the attributes rather than style, and the analyzer should not complain about that -- in fact it should encourage you to use those attributes.
There is probably a lot of subjectivity in the SEO analyzer, but one of the key points of SEO is minimizing download size. Removing style attributes does this. It does increase the size of the CSS file, though, but probably not by as much. I'm not sure what effect that has.
Alright, so I recently found this script called "Selectivizr" and I was really excited, but I plugged it into my project, set it up just as it said, and it didn't work.
So, what I am looking for is any sort of JavaScript library/script that will allow me to use CSS3 selectors (especially :checked) in IE8.
Selectivizr seems broken, and hasn't been updated in over a year. Has anybody else had luck with it?
Does anybody know of any other scripts that will allow for use of CSS3 selectors in IE8?
Not looking for CSS3 stylings like border radius, shadows, etc. Just looking for the selectors, like :before, :after, :checked, etc...
Dean Edward's IE9.js is pretty solid, though I have heard of some incompatibility problems when using other libraries as well. Never experienced them myself, but haven't used the library too often in the wild for a long time. Plug it and play, and if it doesn't break then you're all set.
Link: http://code.google.com/p/ie7-js/
Demos: http://ie7-js.googlecode.com/svn/test/index.html
With jQuery code, you can use these few lines to toggle a class on all your checkboxes (or on it's container) any time it's checked or unchecked. This then lets you use regular CSS code in all browsers.
$("input[type='checkbox']").click(function() {
$(this).parent().toggleClass("checked", this.checked);
});
Working example here: http://jsfiddle.net/jfriend00/7jA5r/.
If you dynamically create checkboxes, then you could use the dynamic form of .on() to make sure to catch them.
I would personally rather use a solution with a few lines of code like this than use a heavy library that tries to add CSS style file capabilities. If you were going to use that, make sure you understand what's really going on under the covers before you adopt it.
If you just wanted a selector libraryby itself, the Sizzle selector library works across a wide variety of browsers including all the way back to IE6. It will adapt to the capabilities of the host browser, using as many built-in capabilities as are present and using it's own code when the host browser does not support an explicit capability.
You can use just the selector library itself from here or it is also the selector library inside of jQuery.
It's extremely simple to use. You just do something like this:
var items = Sizzle(":checked");
and you will have an array of DOM elements that match the selector.