I am unsure if this is possible but I hope so.
I have an element with a translation transform, which I have no control over (it is set by an NPM package that I am using). I would like to set a scale transform on that element and be able to retain whatever transform the element already has, like a concatenation.
Imagine that this is similar to what I want to achieve:
transform: +scale(1.01);
Is this doable, and if so, how?
As far as I know that isn't really possible, so you have two options.
You can find the definition in the package for that transformation, copy it to your CSS, then add your desired changes to it.
or
You can place the element inside a parent element that has your desired transformation on it, that way both work.
Look how CSS works in any HTML page is like you can import as many stylesheets but the stylesheet imported in the last can take all the priority. So, you can obviously override the CSS of that package component by knowing the class/id or if you can catch that particular element by any selector combination.
Also, if your CSS is imported earlier than that component's CSS, you can put !important on your CSS property. So, no other property value can override your CSS value.
You get my point!
Don't mind if it sounds more blahblah.
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 :)
I would like to obtain a CSS-like string from code and add it to the current widget style.
SmartGWT have a setStyleName attribute, which work with CSS present on the stylesheet only, but no set Style or anything similar I can think of. How can I achieve this?
If I understand your question correctly, you should be able to use {widget}.getElement().getStyle() to obtain a com.google.gwt.dom.client.Style object that you can manipulate. But you need to give it individual “parsed” CSS properties.
If you just have a chunk of CSS as a string you can add it to your document with com.google.gwt.dom.user.StyleInjector, then add the needed classes to the widgets that need them.
I have element that could be injected into any page using a Firefox Addon.
Naturally, it and its ancestors are affected by the CSS rules defined on that page.
I can get so far by simply being explicit about every attribute, but even then my declarations may be overridden by an earlier declaration on the page with greater specificity.
Without making a huge mess of needlessly specific selectors and hanus use of !important, how could I go about resetting all elements' attributes under a given element (div#my_root_container_element) and ensure that my declarations under this parent element apply.
Using an iFrame is one option, but I would rather avoid it if possible - is there another way? Given the application, solutions need only work in Firefox.
Thanks.
Obviously, it seems like this aims to override the "specificity" which is core to CSS in general, but this is the closest I remember ever seeing someone attempt it. It seemed somewhat reputable at the time coming from someone involved with the YUI project:
http://developer.yahoo.com/yui/reset/#code
Using SASS, it's not too unpalatable nesting everything under a div with an ID to achieve sufficient specificity, which is the solution I've opted for.
That said, any !important declaration made in the page CSS will overrule my styles.
I am first time poster. A question. How do a make a css declaration that only works within one DIV, but, not overwriting the global css? I want to jQuery loading a page into a DIV, however, the page's CSS changed my own site's CSS. I don't want that. Also I can't just take out CSS because I want them looked as intended from the source.
Basically we are going to load an external HTML with its CSS style applied locally ONLY without it changing the style elsewhere. The external HTML is not using inline CSS since we don't have control over it. They are applied to class values or even all element type. We don't want their CSS declaration modifying our own existing CSS outside of the DIV container.
Is this even possible?
Thank You?
If I understand your question correct you would place an id in the div <div id="mystyle"> content </div>. In your CSS you would write #mystyle p { color:red; }. which have no effect on global paragraphs outside the "mystyle" div.
I guess you are asking how to apply an external stylesheet to just one div. There is no way to do this using just CSS. You might be able to emulate this using JavaScript, but it's going to take quite a bit of work. Here's an outline of how you might go about doing this:
Grab the stylesheet filename from the loaded HTML and then get the contents of the CSS file via AJAX.
Somehow parse the CSS and prefix your div ID to each CSS rule, so that it applies only within your div.
Inject the modified stylesheet as inline text into the loaded HTML.
Steps 1 and 3 are relatively simple, step 2 requires a CSS parser written in JavaScript. (There seems to be one available here although there is no documentation.)
similar to to this here...
http://www.shawnolson.net/a/503/altering-css-class-attributes-with-javascript.html
i know i can change each element's style's individually, but i want to change a lot of elements styles at the same time, and the browser seems to struggle over about 40 elements.
thanks :)
Yes it can, quite easily.
$$('.someClass').addClass('newClass');
This will add newClass to every someClass element - in your case the 40 elements you have.
This is the literal answer to your question.
That said, I believe what you're really trying to do is generate a specific CSS class on the fly.
And that's something far more complicated. I suggest using this MooTools plugin: http://mootools.net/forge/p/moocss