Related
I'm actually using the FontAwesome 5 package, using the SVG+JS implementation with the "data-search-pseudo-elements" option.
I'm in a context where I use a "Select2" plug-in to display a <select> element, which is containing nearly 600 options (for a timezone selection). But when I try to open the select to choose an option, it takes a very very long time to open (which doesn't occur when using the CSS framework, or when pseudo-elements are disabled)!
A little look in browser performances panel seems to show that it's the FontAwesome script which is responsible of this, while there is no pseudo-element in the elements generated by Select2.
Is there any way to improve FontAwesome performance, or to avoid its activation for some HTML elements?
As long as you have data-search-pseudo-elements enabled, Font Awesome will scan the DOM when changes are made, looking for any pseudo-elements that represent icons that should be converted into <svg> elements.
Unfortunately, a scenario like you've described is the Achilles heel of this feature. Scanning the DOM for all possible pseudo-elements can be slow when there are many DOM elements. And the Mutation Observer causes re-scans to occur whenever the DOM changes--which is what sounds like is happening when you open that select control.
So it's probably best to avoid SVG/JS with pseudo-elements in a situation like this.
While I would not recommend putting more effort into trying a work around, if you're up against a wall and for some reason have a requirement to continue using SVG/JS and pseudo-elements together like this, then here are two possibilities:
If you don't need the MutationObserver to watch for changes, then you could disable it altogether using the Configuration API. For example, add data-observe-mutations="false" to your <script> tag.
If you do need the MutationObserver to watch for changes elsewhere in the DOM, but not on this select control, then after disabling the MutationObserver on load (using the above), you could kick it off programmatically on a smaller region of the DOM using the dom.watch() API with a observeMutationsRoot parameter that is more narrowly scoped. By default, the MutationObserver, when enabled, scans everything under a root of document.body, but this is a way that you can make it work on a smaller region of the DOM.
If you have a requirement to support pseudo-elements, and especially if you need to support that in a DOM with many elements, and especially especially if the DOM is changing a lot, it's almost certainly going to be best for you to use the CSS/Webfont technology.
This question already has answers here:
How can I write 'a:hover' in inline CSS?
(24 answers)
Closed 1 year ago.
Is it possible to create inline pseudo styles?
For instance, can I do something like the following?
Coding Horror
The reason behind this is I'm developing a .NET library that creates UI elements. I want to produce HTML elements that can have their hover state set without the use of an external style sheet.
Unfortunately no, you can't implement hover effects using inline CSS.
A (poor) work-around for this problem is to have your controls render style blocks when they are rendered. For example, your control could render as:
<style type="text/css">
.custom-class { background-color:green; }
.custom-class:hover { background-color:Red; }
</style>
Coding Horror
If you could force your users to drop a "style control" at the top of their pages you could render all your custom classes there instead of rendering them next to each control, which would be a very, very bad thing (browsers will restart rendering every time they come across a style block, having a lot of style blocks scattered around your page will cause slow rendering).
Unfortunately there's no elegant solution to this problem.
This is kind of a Catch-22 situation.
On one hand, you can add a style block right before where your element is inserted into the page, but Chris Pebble points out the problems with that. (If you decide on this, make sure you pick unique IDs for your Elements so your selectors don't accidentally select or style anything else).
On the other hand, you could do something like this:
...
But, that's nasty in its own right as it ties together markup, presentation, behavior, and a whole bunch of other things.
You could also inject a stylesheet into the page by writing out a link tag or manipulating document.stylesheets, but that's going to trigger a download.
I've usually seen the first method (adding a style block) done on large. "Modular" portal sites do this sort of thing, so maybe it's the de-facto standard (it is at least more readable and maybe easier to maintain than cramming JavaScript in there?). The JavaScript method seems to have the least impact on the DOM and the overall page as you're keeping your presentation to yourself.
This is one of those front-end dev morasses where every answer you choose is wrong to some extent, so weigh the options and pick what's easiest for you to build and maintain.
I would dynamically create a CSS file as I parse all the controls, and I would add a server side attribute to the controls that contained the hover or other pseudoclass styles.
<a style="color:blue" styleHover="color:blue" id="a1">Click!</a>
Your code can look for these attributes and generate a css file on the fly
#a1:hover {
color:blue
}
I don't know if .NET allows for you to do this type of parsing of the attributes, but I do something similar in a framework I created for php.
Hacss effectively brings pseudo-selectors to inline styles.
You could send a static stylesheet with the built page that uses css variables to control specific states and generate those in your script. Sadly you have to do this for every state and property you want to use.
* {
background-color: var(--n-background-color);
}
:hover {
background-color: var(--hover-background-color);
}
Coding Horror
To avoid using !important we cannot define the normal state inline directly.
Or you can use jQuery's hover function and set the background color.
In CSS, .someclass { text-transform: uppercase } translates all text with class someclass to uppercase, but when I select the text, copy, and paste into a text editor or e-mail, the letters retain their original case. Does some client-side web styling technology other than CSS let a document define a custom text transformation to change things other than case, such as r to w or f to ꝼ, without having the transformation applied when the user copies the text?
Answers to Replace a particular character using css recommended JavaScript. I'd prefer to use some (non-CSS) declarative styling technology instead of script for a few reasons:
I want copy-and-paste to return the original text, not the transformed text, in the same way as the text-transform property.
I want "Find within page" (Ctrl+F) to work if the user types the untransformed letter.
I lack statistics on how many viewers of my site use NoScript or some other script whitelisting plug-in. But then skewed by the fact that I regularly visit an online forum whose users often brag about not being affected by a particular exploit because they don't run JavaScript
A script that runs onload will cause a noticeable flash of unstyled content as the lines are rewrapped.
Lately I was able to write an XSLT stylesheet to alter text nodes within the <body>, based on an answer to a question about whitelisting characters.
(Hint: match="html:body//text()" and translate().)
It fails the copy and Ctrl+F criteria, and it reportedly fails the no-FOUC criterion in browsers that try to get too clever, but it should load in just about every major browser since IE 6 even with script turned off.
However, a year ago, Google tried to kill client-side XSLT a year ago by removing it from Blink.
If Chrome, Opera, and other Chromium-based browsers end up dropping XSLT over this, no-XSLT users will probably outnumber no-script users.
Is acquiring a libre font and modifying it to include custom forms and ligatures that #font-face, font-feature-settings, and font-variant-ligatures can trigger the only way?
CSS - Cascade Style Sheets, as the name implies, it is used only to stylize the sheets (html pages). The snippet .someclass { text-transform: uppercase } is just stylizing the characters (alphabets) inside the tag with class someclass. Its not easy or can I say that its not possible to achieve your need using only CSS and not JavaScript.
According to Zach Saucier's comment for your question, "There is no good way to do this with CSS", And I too agree that.
Using JavaScript its absolutely possible. But your criteria doesn't want you to do so.
My request to you, try using JavaScript or try not using CSS.
I am working on a CMS. One of its functions is the editing of HTML "chunks" in a WYSIWYG editor that are displayed as individual pages.
I have an area in the CMS where these chunks are previewed.
The chunks rely on a "foundation.css" file that is loaded into the WYSIWYG editor. It does some small resets, defines a default font and text color, and is overall very simple.
The CMS, obviously, comes with a ton of CSS statements, many of which affect general settings like font size, family, color, line-height, paddings and the like.
Naturally, when I try to display a HTML chunk in a CMS page, it looks different from when it is displayed only with the foundation.css stylesheet.
Can anybody think of a way to clean a defined area in a HTML page (say, a DIV) from all previous style definitions? I can't.
an Iframe displaying the chunk and embedding foundation.css would help, but I fear for the user's workflow when 5-10 IFrames have to be rendered and then adjusted in height via JS once they are loaded. Yuck.
I have thought about "lifting" all other CSS to a sub-class (i.e. adjusting the CMS' CSS), but that would involve touching a lot of files, some probably PHP source code, and I'd rather not do that.
I don't think this has a solution but you never know.
There are CSS Reset stylesheets available; you could modify those, perhaps?
you could give all of the divs that contain code from the WYSIWYG editor a class, and then reset everything inside of that div.
Adding to what GSto said you can have some style set up like
div.clearCss *
{
property: value !important
}
With all pertinent style properties reset.
This style should apply to anything under an element with clearCss set as it's class, so you would only need to apply that class to the parent element.
Are you using a specific WYSIWYG editor in CMS? I've found that the Telerik RadEditor will allow you to use specific stylesheets for the actual editing area of the editor. The editor that you are using might also be able to to do that.
Good luck, and hope this helps.
If you take TinyMCE for example, they use also an iframe, I think they had the same problems like you. I use it in my backend and on some pages 4 iframes. I don´t see any performance problems.
With TinyMCE it is possible to compress the functions you need (in PHP, JSP, .NET and Coldfusion), this gives you a great speedboost.
Think twice, bevore you write your own WYSIWYG editor, the others are well tested and have a bunk of very good plugins for nearly every need.
As someone who is beginning to make a transition from table based design to full CSS I'm wondering if using the style attribute to make adjustments to elements is considered "cheating" and if absolutely ALL presentation should be strictly in the style sheet?
See also:
A question of style - approaches to styling and stylesheets
There are cases where you know for sure that all you want to do is tweak the style of this one specific element, and nothing else.
In those cases you can happily use an inline style attribute. But then, at some point in the future, you'll realise that in fact you need to apply the same style to something else, and you'll realise you were wrong.
Been there, done that. 8-)
I feel there's an aspect that has not been touched upon here: the distinction between hand-edited HTML snippets and generated HTML snippets.
For human editing, it's probably better and easier to maintain to have the styles in a file.
However
As soon as you start generating HTML elements, with server-side scripts or with some kind of JavaScript, be sure to make all styles required for basic functionality inline!
For example, you wrote some kind of JavaScript library that generates tooltips. Now, you will inject DIVs into your page, that will need some styles. For example, position: absolute and, initially, display:none. You may be tempted to give these elements the class .popup and require that this class has the correct definitions in some CSS file. After all, styles should be specified in the CSS file, right?
You will make your JavaScript library very annoying to reuse, because you can no longer simply copy and invoke one .js file and be done with it. Instead, you will have to copy the .js file, but also have to make sure that all styles required by the script are defined in your CSS file, and you have to go hunting for those, and make sure their names don't conflict with classes you already have.
For maximum ease of use, just go ahead and set the required styles directly on the element as you create it. For styles that are purely for aesthetical purposes, such as background-color, font-size and such, you can still attach a class, to give the consumer of your script an easy way to change the appearance of your script elements, but don't require it!
You can use the style attribute, but the point of using CSS is that you make a change in a single file, and it affects the entire site. Try to avoid it as much as possible (old habits die hard)
It's not maintainable. All of us have done it. What you're best to do is put every adjustment into a style. Let me teach you something most developers do not know about CSS ... you can use N styles at a time.
For example, imagine you have a great style for colorized divs called someDIVStyle:
.someDIVStlye
{
background-color: yellow;
...
}
You want to use it, but just want to adjust the background-color to blue. Many people would copy/paste it and then make a new style with the change. However, simple create a style like this:
.blueBackground
{
background-color: blue;
}
Apply it as such:
<div class="someDIVStyle blueBackground">...
The style furthest to the right always overrides the properties of the styles preceding it. You can use a number of styles at once to meet your needs.
I agree with some other posters that it is best to keep the style information in the stylesheet. CSS tends to get complicated quickly, and it is nice to have that information in one place (rather than having to jump back and forth from HTML to stylesheet to see what styles are being used).
A little off-topic tip: Pressing F12 in IE8 brings up a great tool that lets you inspect the styles of elements in web pages you're browsing. In Firefox, FireBug does the same thing. Those kinds of tools are lifesavers if you want to know how a style change will affect an element.
It's a very "personal" question, to me the word "ALL" is a very strong word. You should do your best to have most of the styling in your css. but you can use style occetionally if it makes your life easier.
Generally it is best to have styles on the style sheet especially if it will be used multiple times, but using the style attribute is definitely not "cheating". A quick look through the stackoverflow source shows many examples of this.
Yes, it's kind of cheating, but it's up to you if you want to cheat a little. :)
The fundamental idea of having the styles in a style sheet is to separate the content from the layout. If you use the style attribute you are still mixing layout within the content.
However It's not that terrible, as you can quite easily move the style into a class. It's quite handy during development to be able to set a style on a specific element so easily without having to make up a class name and worry how the style will cascade.
I sometimes let the style attribute go through in the production code, if it's something that is specific for just one page, and if it's doubtful that it will be there for long. Occationally just because I am pressed for time, and it can be cleaned up later on...
So, even if you use a style attribute sometimes, you should still have the ambition that all the styles should be in a style sheet. In the long run it makes the code easier to maintain.
As others have said, in general, no.
However, there are cases where it makes perfect sense. For example, today I had to load an random background image into a div, from a directory with an unknown # of files. Basically, the client can drop files into that folder and they'll show up in the random background image rotation.
To me, this was a clear reason to dynamically build up the style tag on the div.
In addition, if you're using, for example, the .net framework with webforms and built-in controls then you'll see inline styles used anyway!
There can be very good reasons to put style information in a specific page.
For example, if you want to have a different header background on every page (travel agencies...), it is far easier to put that style information in that specific element (better, in the head of the document...) than to give that element a different class on every page and define all those classes in an external style-sheet.
The style attribute does have one important use: setting style programmatically. While the DOM includes methods to manipulate style sheets, support for them is still spotty and they're a bit heavyweight for many tasks, such as hiding and showing elements.
Yes, the style attribute is frowned upon in general. Since you're moving to the CSS method from table-based, I'd strongly recommend that you avoid inline styles. As a previous poster pointed out: bad habits are hard to break and getting into the habit of using inline styles for their temporary convenience is a mistake. You might as well go back to using the font tag. There's really no difference.
Having said that, there are occasions where it makes sense to use a simple inline style, but first develop the habit of using stylesheets. Only when you're comfortable with putting everything in a stylesheet should you start looking at shortcuts.
I think that's the general consensus of everyone who posted an answer