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.
Related
I'm trying to find a way to extract all css rules from any given element (I have full access to the html, and css).
I have look into other solutions such as getComputedStyle, however, it doesn't help much with certain properties such as width or height. For example, I expect it to return width: 100% when applicable, but it always return the real width value in px. What I need is the CSS rule definition, not how it is actually rendered on the browser.
My last resort is to use some css-inliner such as juicejs then I can access the element.style.prop, but I think if these js inliners can turn css rules to inline css then they must have extracted the css rules along the way already? I tried to look into its source but if there is any module out there doing the job it would be much better than trying to extract the code from that library.
It amazes me that there are not many solutions available for this issue. I ended up finding 2 solutions that both work (there are probably some edge cases but I have not encountered yet)
Option 1: A getMatchedCSSRules implementation posted here:
https://stackoverflow.com/a/37958301/821517
Pros: short and concise
Cons: does not support pseudo selectors (yet)
Option 2: A very all library called CSSUtilities mentioned here:
https://stackoverflow.com/a/12023174/821517
Pros: it can handle pseudo selectors
Cons: very very old library which relies on another library that is deprecated.
I ended up using CSSUtilities and I had to make some changes (hacks) to make it work with the new js engines. I post both modified files here in hope that it will help others (and that errors I made can be spotted and suggested with fixes)
New files: https://gist.github.com/yellow1912/c9dbbab97497ec42489be55e8abe73c7
Please ensure that you visit this link to download the package which contains the document file: http://www.brothercake.com/site/resources/scripts/cssutilities/
Is there a way to generate ugly class names? I mean if there's a plugin that I could use to replace .top-header class with .a9ev in my css. Also, would be great if class name in my html was also changed
How big sites like facebook or google do this?
You may have some luck using one of these:
https://kangax.github.io/html-minifier/
http://www.willpeavy.com/minifier/
https://cssminifier.com/
https://www.npmjs.com/package/html-minifier
https://github.com/ccampbell/html-muncher
https://github.com/webpack-contrib/css-loader
http://minifycode.com/
https://www.npmjs.com/package/node-minify
https://www.npmjs.com/package/gulp-minify-cssnames
Some of those are general tools and some of those like gulp-minify-cssnames are very specific tools that do one thing only - like minifying the CSS class names and IDs in this case.
Make sure that you use the same versions of minified names across all of your code, i.e. that you reference the classes in HTML, CSS and in JavaScript by the same (minified - or uglyfied) names.
Because I like keeping all source code in one file (per class), I decided to add all style and CSS using JQuery objects, i.e:
jquery : $('<div/>',
{
id:'Object',
css:{
height:'100%',
width:'69%',
color:'white',
fontWeight:'bold',
textAlign:'center',
backgroundColor:'#02297f',
marginLeft:'.5%',
'float':'left',
overflow:'auto',
borderRadius:'5px'
},
html : 'My JQuery Object'
}),
Now I know there is probably going to be some sort of performance impact, but my question is how much? Does anyone else do it this way? Am I overlooking a potential problem?
I like it this way because I can just use objects rather than having to cross examine a stylesheet and it keeps it better organized.
EDIT: This is for a Javascript application, not a web page. So disabling the Javascript will kill the webpage anyway.
There is certainly a performance impact. The script is only run when all the page is loaded, so it will give you problems when the page is first displayed.
Apart from that, you got no styling at all when you run a browser where javascript is disabled.
But most of all, it is a Bad Idea. CSS is for styling, for the looks of your page. HTML is for structure, and Javascript is for logic, interactivity. I think you shouldn't use the .css method at all. If you need to toggle styles in Javascript, use classes instead, which can then be styled using style sheets.
But this method of yours takes it a step further even. I think it's even worse than putting all the css in inline style attributes. I hope you are just asking this question to see how people respond. It must not be serious. :s
Your are doing it wrong.
CSS must stay in *.css files and Javascript in the *.js files.
There is this thing known as 3 layers of Web:
content ( HTML )
presentation ( CSS )
behavior ( JS )
First of all, yes, if you use JS to generate html and style it, this would have a huge impact on performance. But even ignoring it : you would make the code virtually unmaintainable.
If you want to have better organized stylesheets, then invest some time in expanding your knowledge in CSS, and looks at practices behind OOCSS.
Thats a TERRIBLE IDEA! Use instead http://xcss.antpaw.org/
I agree with the way you're doing it. I essentially use it myself. I am developing a html5 game and in that context what you are doing makes sense. In games, user events and system events constantly change the screen. You can only realistically deal with this via just-in-time styling. So using .css() is a great way to do this. I think in a game that sprites are so distinct that they require their own style object.
I normally work with jQuery, which takes away most of the cross browser pain (although not, unfortunately, all). However, it doesn't seem to have any support for manipulation of the CSS DOM, and this still seems to be a bit of a minefield - QuirksMode has some information.
Our application allows users to theme their site to some extend by generating a CSS stylesheet with the colours that they have selected. It's pretty straightforward, but I'd like to let them "preview" it by applying the changes directly to the CSS DOM, before having them save it back to the database and generating the CSS file.
Does anyone know of a library which will make cross browser CSS DOM maniuplation easier? Just so we're clear, I'm not trying to change the css rules on an element, or set of elements (like with $.css()), or to add/remove classes. I would like to modify the stylesheets directly.
I highly recommend the YUI stylesheet utility. I haven't seen any other libraries with as much functionality or as clean an interface.
Couldn't you just add or replace a <style> element in the main document's DOM, and fill it with the generated CSS?
Best and easiest way, is to create a .jsp .php or whatever you're using which accepts colour parameters, which in turn renders a .css output with colours replaced.
Use JavaScript to make a request with colour parameters and append the css script to the page.
It is possible to do it directly on the styleSheet object, though this will take more time and create more maintenance. Everytime you want to change your custom stylesheet you actually use for production, you will also have to change the preview version. Ergo discrepancies will ensue.
Just reuse the stylesheet template you're going to use for production anyways.
Maybe you should try something like:
document.styleSheets[0].disabled = true;
This disabled the first stylesheet of the current page. Maybe if you play around with it you can resolve your problem.
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