I met a person who can't stop writing everything in uppercase in the internet. She has eye problems and just doesn't want to zoom in and out all the time to read lowercase.
I would like to write a CSS style sheet that converts all the text in a page to uppercase. With some googling I can do this alone, but if anyone can help me here that would be useful.
Most important, I want to apply this CSS sheet to the browser: is this possible?
To make everything uppercase use * {text-transform:uppercase;}
jsFiddle example
It's possible to change the browser's default style sheet however each browser has a different way of doing this.
One of the simplest ways is probably to use Stylish in Firefox. It lets you add a style sheet to be applied on all pages, in a manner that is easy to switch off then needed. And you could simply write
* { text-transform: uppercase !important; }
Without the !important specifier, the style sheet would be ineffective as regards to elements that have text-transform set in page style sheet.
Note that this only changes the display of characters. When typing text in a textbox, without using the shift key, it would be displayed in upper case but, upon form submission, as well as in any scripted processing in the browser, it would still be in lower case.
Related
I'm trying to write a Stylus script for a forum in which users may define custom text colour, font, or size. Specifically, I want to functionally negate those customs in favour of a universally defined default. The issue is, applying the requisite style to post-text-content only applies if that content is already in the default state. Each customisation to the text by a user creates its own unique <span style>, such that I would need to write thousands of lines in the style, each replacing <span style="color:green">, and so on until I've exhausted every possible CSS colourname and hexcode; then I would have to repeat the same for text sizes (only five, thankfully) and fonts (I think the forum supports 22).
Effectively, I want a single selector for every possible <span style="color:*">. I can manually do the fonts and sizes if I have to. I tried the wildcard, it didn't work. Is there a wildcard I can use? Is there a specific method of negating any code within a certain div, when simply selecting that div fails to do so?
I'm not sure if I understood you correctly, but you can use standard CSS property selector:
span[style~="color:"] { color: red !important; }
/edit
Just realized you're better off with the tilde selector than the wildcard to not accidentially target something like background-color:.
Normally I can get around the fact xpages hijacks the id-attribute on fields etc by using the x$ jQuery selector...
However, I'm building a sylesheet using the #print media query to make a normal form into a pretty version when printed. I have a scenario, where I have a custom control, have given it an ID of GuidanceArea, and under normal circumstances would be able to reference it in my style sheet with #GuidanceArea, just to simply hide it for example for this scenario.
However this isn't working, I assume because of the ID hijacking? It's not too much of a big deal, as I have workaround where for all elements I don't want to print I just append no-print to the elements styleClass and have .no-print set to display:none in my #media print within the style sheet.
However out of curiosity more than anything, I wondered if there's an easy way to get a hold of an elements ID for use in CSS?
The short answer: don't
The longs answer: JSF and XPages manage the id attribute to ensure it is unique on a page. So you don't have actual knowledge what it will be.
The easiest way is to use the class attribute to mark the element of interest, so your selector would be .someclass instead of #someid
But if you absolutely have to: use an XPages output element to send a piece of computed inline css where you use expression language to obtain the actual id. Browsers or libraries might cough on the : in the id, so your result requires lots of testing. VanillaJS should work.
I'm not sure this is possible, but id like to set all user styles back to chrome defaults for div and descendants.
I'm building a Chrome plugin that creates a popup on any web page, however due to the fact every page has a plethora of custom styles, trying to track down every inconsistency and overwrite it with my divs (and descendants) custom style, it is becoming a nightmare.
Every time I think I've covered all bases another site implements something else that needs to be overridden.
What would be the easiest approach to standardize my popup in this situation?
One approach I can think of is to (bite the bullet) and get a hold of the the default Chrome CSS styles and implement them into a series of catch all descendant selectors, however surely there is a better way.
If you want to be absolutely sure that the styling of your elements is not affected by the web-page's CSS, there are 2 possible solutions:
Use an iframe to implement your popup. (This solution is "safe" and simple enough, but based on the kind of interaction between the popup and the web-page it might become cumbersome.)
Utilize the Shadow DOM. (This is probably the "proper" solution, but the implementation might be a little more complicated.)
Some resources regarding the 2nd solution:
An introductory tutorial.
An actual example of incorporating the "Shadow DOM" concept into a Chrome extension:
RobW's Display Anchors extension
There is a third option worth discussing and rejecting, which is to reset all the style properties of the div and its descendents to its default value. Pseudo-code:
#my-div, #my-div * {
#for-every-css-property {
%propertyName: initial !important;
}
}
This answer shows an attempt at such a solution. It uses specific values instead of initial which will work in older browsers without the initial keyword, but will not correctly reset elements which have a different default from the base (e.g. user566245 mentions that textarea elements should have a border).
Issues:
Unfortunately initial is not actually the browser's default value.
If we don't use !important above then there is a risk that the page might have provided a rule with a more specific elector which overrides our own. For example if the page specified properties for table > tr > td then this would be applied over our rule because that selector is more specific than #my-div *.
Since we do use !important, any custom styling we want to do after the reset must also use !important on every property.
If the page happens to inject any additional CSS styles after ours that uses !important then these can override our reset.
It is rather inefficient. We are asking the browser to apply a huge bunch of CSS rules to every element under our div.
Vendor-specific properties should also be reset. (E.g. -webkit-animation-name.)
If new CSS properties come into existence in future, you will need to update your list.
Whilst this solution can be applied to current browsers, it is rather horrible, so roll on Shadow DOM! I would recommend the <iframe> solution in the meantime.
I don't know if anyone has tried this, but a more efficient solution might be to use Javascript to detect what site-defined CSS properties could be problematic, and reset only those.
So, I know that this isn't something that is normally a good idea for a website, but I have a special purpose/intent for such a use:
I have a multilingual dictionary that I'm working with online, where I need one of the languages to be in a specific font, from a file that I specify locally. However, I want this language to be rendered ONLY in this font, as if it is rendered using any other font, it will render incorrectly. That's all fine and dandy, and I can load the file in CSS and whatnot.
But I want to make it so that if it can't load that file, either for one reason or another, or something goes wrong, it can't go to another font. Basically, render this text using this font, and if you can't do that, don't just try and render it with Arial or whatever is the default -- show me blocks, show me a stark something.
I've spent a bit looking around, but am not sure what in CSS I would be using for this. Suggestions/help? Thanks :)
As an update to this question, since April 2013 there exists the Adobe Blank Font, which can be used for that purpose.
You may build a cross-browser css with FontQuirrel WebfontGenerator and the Adobe Blank font files.
If you just need the font in OpenType format you can use this single css file with the already embedded font
You can't do this. Text is text and text has to have a font that it is to be rendered in. If you really want, there's probably some weird JavaScript function that can detect the actual font being used for the text and if it doesn't match the one you want, then you can hide it or something. But in the end, your only option is to have the text displayed in some obscure font, or completely hide the text. If the text is visible, it has to be rendered using some font.
You could also theoretically create your own font where all the characters are just blank, but that seems highly illogical and such a waste of resources to make people download a font just so it can display meaningless emptiness.
There is no "don't render fonts" option. It's a font, it needs to be rendered, or else it's hidden visually in the DOM.
You could use Javascript to find out the font being applied to a certain block, and if it's not the font you want, just hide it. Or display a message.
Another solution is somehow specify the content to be empty. For example, I'm trying to override the +/- character that a Webix tree displays using Font Awesome:
#lhn-tree-container .webix_tree_open:before {
content: '';
}
This only works with the :before and :after pseudo-elements though.
I found that I should be using Reset CSS file for making websites, but after I include it, all the <em> and <code> tags lose their style. <em> is not longer italic and <code> is no longer constant font.
I fixed it by adding em { font-style: italic; }, but I can't possibly add this for all the tags that lost their style?
Any ideas why?
Thanks, Boda Cydo.
The simple way will be to remove the styles from reset that you don't want re-styled or want to preserve. Reset css does not mean that you can not customize or delete anything from it.
I found CSS resets to be a pain. In the end, you basically put back the styles that were already there by default. It's much easier to just style the elements as needed.
No CSS Reset
The problem I've had with these resets is that I then find myself declaring much more than I ever needed to just to get browsers back to rendering things the way I want. As it turns out, I'm perfectly happy with how a number of elements render by default. I like lists to have bullets and strong elements to have bolded text.