This is generic question, is it possible to monkey patch the CSS from link tag? I want to modify PrismJS library that have color and background and patch it to have --color and --background. Is something like this possible dynamically using JavaScript?
I would like this to be generic so no Service Worker, that will work only for local files that can be changed by modifying the file, I want to affect every possible url the same I'm patching JavaScript file. I can assume that the CSS selectors will always be the same.
The problem is that without the monkey patch I will need to maintain all themes that PrismJS have for different colors, I can write script that will create those styles for me but I want to know if there is a way to monkey patch. Also I can have single CSS file to be used instead of the PrismJS CSS, but I will lose different styles.
I have other options but right now I only want to know if monkey patch of external CSS is possible? I can't find anything like this.
I need to add that PrismJS themes are pretty simple they are just few selectors with colors. I'm not sure if they all have same selectors though.
EDIT:
To give you context I need this for jQuery Terminal to render text that user type (any programming language to be in color). I have one CSS that I have locally but without that file it don't work exactly the same (mainly there is lack of style for text selection that I would like to be in color, to have 100% working code as I want). The idea is to use same monkey patch I have but to use prism.css.
Hi I'm an average in CSS but I did not understand why in many websites I find that this file does not appear and many theme I do not find the css file in charge of this class is this way in css I do not know.
I want to edit this class from the file but can not find the file?
Strangely, it's not the automatic properties of the browser.
Not necessary that class must have css written. Sometimes classes written to manage JavaScript.
You are looking at the final result of what is probably a CSS-in-JS approach that many popular tools out there provide. The original classes that the developer writes in their code are transformed into the sort of garbled looking classes when the build process is run.
The result is CSS classes that are unique and do not conflict in the traditional global CSS sense. This also means you cannot so easily track down the source of the code through your inspector unless the developer has generated and provided source maps as well.
A good example of one of these CSS-in-JS tools is Styled Components (https://www.styled-components.com/) but there are many others out there.
I just learned a lot about how to avoid inclusion of "jQuery-min.js". The reason I thought I needed jQuery was to use $('someTag'). That was the only jQuery call I had in my document.
So I buckled down and learned a little about NodeLists for the purpose of using document.getElementsByTagName. See Specify an array without jQuery and without NodeLists [SOLVED .. I think?]
Now, I've come across Modernizer in my effort to include certain styles for Javascript and other styles for non-Javascript.
Obviously its size is microscopic compared to jQuery-min.js ... but it is another file I need to include. Besides, the presence of Modernizer eliminates a bunch of older Browsers that might still be used. Heaven knows "non-js" and "js" classes are very appealing ... but another file??
So ... without Modernizer, how can I include certain styles for Javascript and other styles for non-Javascript?? display:none and display:block are neat, but I need to dynamically switch back and forth depending on the presence of Javascript.
Contribution of ideas would be awesome!
You can write a single line of Javascript code to add a CSS class to your <body> element:
document.body.classList.add('js');
I am embarking on a daunting task of cleaning up an existing site. I'm completely stripping out years worth of CSS added by multiple developers in favour of adding a new framework and my own set of clear CSS styles.
What I want to do is reserve ID for JS and class for CSS. I do know that some of the JS will need to look at classes but that's ok. There are however many times I will be able to change the class name to an ID without issue.
The existing site has 11755 instances of class=" across 457 files but I can't just strip them out because I know that some JS is dependant on some of those classes.
Can anyone provide any help as to how to locate the dependant classes in the JS? I have no idea how to do this other than manually and that seems crazy.
Search all of your files with the following regex (you have to figure out how on the system you're using)
class=("[^"]*")
with will get all your class names within quotation marks.
You intersect this list with the strings (in quote marks) used in the javascript. The intersection will be the classnames that the javascript is dependent on.
Start by finding in files for $(' or $(" or getElementById
A good regular expression will start you up with substancial material to work on.
Is there a way to create your own HTML element? I want to make a specially designed check box.
I imagine such a thing would be done in JavaScript. Something akin to document.createHTMLElement but the ability to design your own element (and tag).
No, there isn't.
The HTML elements are limited to what the browser will handle. That is to say, if you created a custom firefox plugin, and then had it handle your special tag, then you "could" do it, for varying interpretations of "doing it". A list of all elements for a particular version of HTML may be found here: http://www.w3.org/TR/html4/index/elements.html
Probably, however, you don't actually want to. If you want to "combine" several existing elements in such a way as they operate together, then you can do that very JavaScript. For example, if you'd like a checkbox to, when clicked, show a dropdown list somewhere, populated with various things, you may do that.
Perhaps you may like to elaborate on what you actually want to achieve, and we can help further.
Yes, you can create your own tags. You have to create a Schema and import it on your page, and write a JavaScript layer to convert your new tags into existing HTML tags.
An example is fbml (Facebook Markup Language), which includes a schema and a JavaScript layer that Facebook wrote. See this: Open Graph protocol.
Using it you can make a like button really easily:
<fb:like href="http://developers.facebook.com/" width="450" height="80"/>
The easiest way would be probably to write a plugin say in Jquery (or Dojo, MooTools, pick one).
In case of jQuery you can find some plugins here http://plugins.jquery.com/ and use them as a sample.
You need to write own doctype or/and use own namespace to do this.
http://msdn.microsoft.com/en-us/magazine/cc301515.aspx
No, there is not. Moreover it is not allowed in HTML5.
Take a look at Ample SDK JavaScript GUI library that enables any custom elements or event namespaces client-side (this way XUL for example was implemented there) without interferring with the rules of HTML5.
Take a look into for example how XUL scale element implemented: http://github.com/clientside/amplesdk/blob/master/ample/languages/xul/elements/scale.js and its default stylesheet: http://github.com/clientside/amplesdk/blob/master/ample/languages/xul/themes/default/input.css
It's a valid question, but I think the name of the game from the UI side is progressive markup. Build out valid w3 compliant tags and then style them appropriately with javascript (in my case Jquery or Dojo) and CSS. A well-written block of CSS can be reused over and over (my favorite case is Jquery UI with themeroller) and style nearly any element on the page with just a one or two-word addition to the class declaration.
Here's some good Jquery/Javascript/CSS solutions that are relatively simple:
http://www.filamentgroup.com/examples/customInput/
http://aaronweyenberg.com/90/pretty-checkboxes-with-jquery
http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/
Here's the spec for the upcoming (and promising) JqueryUI update for form elements:http://wiki.jqueryui.com/Checkbox
If you needed to validate input, this is an easy way to get inline validation with a single class or id tag: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
Ok, so my solution isn't a 10 character, one line solution. However, Jquery Code aside, each individual tag wouldn't be much more than:
<input type="checkbox" id="theid">
So, while there would be a medium chunk of Jquery code, the individual elements would be very small, which is important if you're repeating it 250 times (programmatically) as my last project required. It's easy to code, degrades well, validates well, and because progressive markup would be on the user's end, have virtually no cost on the server end.
My current project is in Symfony--not my choice--which uses complex, bulky server-side tags to render form elements, validate, do javascript onclick, style, etc. This seems like what you were asking for at first....and let me tell you, it's CLUNKY. One tag to call a link can be 10 lines of code long! After being forced to do it, I'm not a fan.
Hm. The first thought is that you could create your own element and do a transformation with XSLT to the valid HTML then.
With the emergence of the emerging W3 Web Components standard, specifically the Custom Elements spec, you can now create your own custom HTML elements and register them with the parser with the document.register() DOM method.
X-Tag is a helpful sugar library, developed by Mozilla, that makes it even easier to work with Web Components, have a look: X-Tags.org