I asked a while ago about the tailwindCSS TailwindCSS - is there a way to not write multiple times the same prefix? like `hover:` for example
and someone correctly solved the problem but with javascript (for now it seems to work perfectly fine)
but someone in the comment said that using `${className}` is bad.
the line that he talking about is this
element.classList.add(`${pseudo}:${className}`);
// sample output: "hover:bg-blue-500"
at this point, I don't know if is right or not, because at the end of the day in dev tools it will only add a string.
so js will auto-translate it to browser-friendly code.
before:
<div class="text-white">
after:
// ✅ here what I get
<div class="text-white hover:bg-blue-500">
// here what maybe the guy think it will happen
// or I don't know what bug he talking about
<div class="text-white ${pseudo}:${className}">
like you see the browser it correctly adds it.
so I don't get where is wrong the script, so I will correct it because having bugs in the future.
currently I am using html,css only. maybe the bug will happen only on react and framework where you can't do classList.add() but directly write the class in the return?
I don't know , if someone is experienced and know the bug he talking about tell me.
(and if is something I don't need to worry about, tell me also so I will use it everywhere in the projects)
Here we can read that
The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.
If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:
So, yes, it just creates a string that is used for classes, but that's not the case.
Tailwind generates CSS file with all classes that you actually use in your codebase. If you will use a template string it will not find the classes and they will not be present in the final CSS file.
Tailwind isn't including all of the classes by default to reduce the file size.
P.S.
The worst thing about using template strings is that it can look as if it was working because you included the class somewhere else in your code.
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.
I am new here.
Just want to ask several question to anyone experienced in this field.
So I have just bought a php website, and the case is that the owner of this theme seems a bit strict with copyright stuff, so he placed his own identity in almost every way.
In example, the website named "mcdonalds", he have almost in his entire css class after his name/brand, example .mcdonalds_header , or .mcdonalds_style.css , etc .
Now my question is,
Is it possible to change entire css class dynamically?
I meant, if I open it through text editor maybe I could replace them all by hitting Ctrl+H and replace "mcdonalds_" with [nothing].But of course it will return many errors as the entire php and js file are associated with those class.
What I want in example I have
index.php with 8 div have class "mcdonalds_grid"
style.css file with class "mcdonalds_grid"
is it possible to edit the class in css "mcdonalds_grid" to "gridStyle", and then the entire 8 class in the file changed automatically, too?
Because I am not sure to do it manually. In my case I have up to hundred thousands to be edited. It sicks. And if you asked the reason I need to do this, so it looks more professional using my own brand rather than using mcdonald's stuffs.
Any view would be appreciated.
Thanks!
Others have mentioned Jquery.
You could also do it dynamically with Less Mixins: https://www.gaslampmedia.com/mapping-css-styles-less/.
Or you could do it non-dynamically (I would recommend this). You could use an IDE (Integrated Development Environment) or an advanced text editor to search and replace all instances of a text string in the entire project at once. In your case, you could replace all instances of mcdonald with the name of your company or project. Advanced Text Editors like Sublime Text or Notepad++ could let you do this, but you would generally need to open all of the files at once. IDEs like Visual Studio or Dreamweaver would also let you do this, with the benefit of not having to open all of the files (you just add the files to your project).
I personally don't suggest to make these types of edit but if you must need to do then follow the process:
From the answer of the question
You can use IDE to change something in the whole project. I would suggest NetBeans. It's easy. Just add the project to NetBeans, click on edit (in the top left corner) and then click on Replace in project.. ( check in the bottom of the popup)
then
I found this great tutorial http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/
Its easy to follow but i am getting stuck with the JS because i want to have more than one image on the page.
Can someone assist.
You dont need to edit your script (May be the selector).But you have to set two classes for each of your images, one is for common identity (will be feasible while selecting from Jquery) and the other one is to set unique styles to each pair of your images
DEMO
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