This image is from Chrome, notice the color of the text-red-900
You can see the example output on the right side, the Aa.
https://tailwindcss.com/docs/text-color
**This image is from Brave Browser, notice the color of the text-red-900 is lighter than most of the other text-red-xxx classes.
Why is this? Both are using my computed system default dark mode.
You can see there is a inline style overriding the CSS color for this element, where is this inline style coming from? and how do I prevent it?
--darkreader-inline-color: #e17d7d;
Note: I have 2 macbook pro Os Monterey M1s. This is only happening on one of them, the other is rendering colorrectly.
I completely uninstalled Brave Browser, including all the files for Brave within the ~/Library folder like Preferences and what not.
Then I reinstalled, and seems to be working without any additional settings.
Is there some setting that would force elements to be lighter in Brave Browser to support Accessibility.
I believe it was some extension called Dark Reader that was brought over from chrome (disabled on chrome, but enabled on Brave) What an annoying extension.
I recently updated to iphone 15.1. I opened the Safari browser and looked at my website. The 'send' button on all my forms has turned blue. It wasn't that way before. What's going on? How can I change this?
You may take a look at what color does the button use with the safari's Developer Tools, and by connecting your iPhone.
As you did not provide your code, I guess your button may be using the color inherited from html or body. You may try to explicitly specify the color on the button. For example:
.your-button-classname {
color: #your_color;
}
In Firefox 67, one can use media queries to detect user preference on light or dark theme.
In my version of Firefox (under Ubuntu), it seems that my preference is light theme. That is, the following CSS gives a blue background:
#media (prefers-color-scheme: light) {
:root {}
body {
background-color: blue;
}
}
How can I change my Firefox preferences so that prefers-color-scheme: dark
evaluates to true?
I found an add-on that seems to do the trick, but I must be doing something wrong with my own CSS, as it does not work on my page.
Dark Website forcer
Good news -- from Firefox 87 this is now enabled by default, without the need to set a configuration flag! You can find it in the inspector tab:
Choosing the sun button simulates light mode;
Choosing the moon button simulates dark mode;
With no button selected, your operating system default will be used, as per normal.
In some older versions of Firefox, this feature existed behind a flag. To test on one of those versions, you can thus enable this by going to about:config, and setting the devtools.inspector.color-scheme-simulation.enabled property to true. Once that's done, you'll find the controls for it in the same place as in the modern devtools, but as a single paintbrush icon rather than today's sun/moon toggle buttons.
You can update the style used by Firefox by going to about:config and adding a new property ui.systemUsesDarkTheme of integer type with value 1.
It doesn't automatically update the value on active pages in the same way that it does when you're updating OS settings in Windows or Mac, but if you refresh the page after updating it will pick up.
You can confirm the browser setting is correct by viewing the example on mdn
Edit:
On firefox 71 the update is applied to active pages without refresh
Just for the sake of completeness: If everything fails, there is a Firefox add-on called “Dark Website Forcer” (also on GitHub).
It changes the style by reading the CSS of the website and re-applying the parts for the dark version again, if you want to have a dark one. As such, it also can only force a dark website, not the light one. The Readme has a detailed explanation why.
Disclosure: I'm the author of this add-on. 🙂
I just started developing applications for firefox OS. I done a sample application and it is working perfectly. My issue is in my simulator my application Icon is not displayed. It uses the default icon.
I added the below code in my manifest file:
"icons": {
"128": "Feed.png"
}
Added a 128 x 128 image named Frrd.png to my directory. But it is not working for me, what can be the issue ?
First Answer:
Finally I got it.
For Firefox OS the icon size should be of size 30 X 30 or 60 X 60.
For Firefox Market place the icon size should be 128 X 128
For Firefox OS icons should be provided without a drop shadow and a
close cropped canvas in the following sizes:
30 x 30
60 x 60
Note: Firefox Marketplace requires all submitted apps to have a minimum of one icon that is at least 128 x 128.
Reference: Firefox OS - Style Guide
Actual Solution
I added all images with the dimensions specified in the doc to my application. But it also not worked !!!
Atlast I added a directory img to my project and added icons to it. Then modified the manifest.webapp file like:
"icons": {
"128": "/img/Feed.png"
}
It worked for me, I don't know whether it is a bug or not.
Firefox OS uses 30x30 and 60x60 icons
Using manifest.webapp to add Manifest not URL in Firefox OS Simulator.
This should work:
"icons": {
"128": "/Feed.png"
}
Firstly, +1 #Midhun MP. Secondly, it seems to only work with top-level directories regardless of the directory name. Tested on the Firefox OS Simulator version 1.2
Works:
"icons": {
"128" : "/icon/128.png"
}
Doesn't Work
"icons": {
"128" : "/assets/icon/128.png"
}
I've recently been working on a print stylesheet for a website, and I realized that I was at a loss for effective ways to tweak it. It's one thing to have a reload cycle for working on the on-screen layout:
change code
command-tab
reload
but that whole process gets much more arduous when you're trying to print:
change code
command-tab
reload
print
squint at print-preview image
open PDF in Preview for further inspection
Are there tools I'm missing out on here? Does WebKit's inspector have a "pretend this is paged media" checkbox? Is there some magic that Firebug (shudder) can do?
There is an option for that in Chrome's inspector.
Open the DevTools inspector (mac: Cmd + Shift + C , windows: Ctrl + Shift + C)
Click on the Toggle device mode icon , located on the upper left corner of the DevTools panel. (windows: Ctrl+Shift+M, mac: Cmd+Shift+M).
Click on the More overrides icon in the top right corner of the browser viewport to open the devtools drawer.
Then, select Media in the emulation drawer, and check the CSS media checkbox.
This should do the trick.
Update: The menus have changed in DevTools.
It can now be found by clicking on the "three-dots" menu in the top right corner > More Tools > Rendering Settings > Emulate media > print.
Source: Google DevTools page*
I'm assuming you want as much control of the printed window as possible without using a HTML to PDF approach... Use #media screen to debug - #media print for final css
Modern browsers can give you a quick visual for what's going to happen at print time using inches and pts in a #media query.
#media screen and (max-width:8.5in) { /* resize your window until the event is triggered */
html { width:8.5in; }
body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */
...
}
Once your browser is displaying "inches" you'll have a better idea of what to expect. This approach should all but end the print preview method. All printers will work with pt and in units, and using the #media technique will allow you to quickly see what's going to happen and adjust accordingly. Firebug (or equivalent) will absolutely expedite that process. When you've added your changes to #media, you've got all the code you need for a linked CSS file using media = "print" attribute - just copy/paste the #media screen rules to the referenced file.
Good luck. The web wasn't built for print. Creating a solution that delivers all of your content, styles equal to what's seen in the browser can be impossible at times. For instance, a fluid layout for a predominantly 1280 x 1024 audience doesn't always translate easily to a nice and neat 8.5 x 11 laser print.
W3C reference for purusal: http://www.w3.org/TR/css3-mediaqueries/
Chrome 48 you can debug print styles within the Rendering tab.
Click the menu icon top right of inspector and Rendering Settings.
Edit
For Chrome 58 the location has changed to Web Inspector > Menu > More Tools > Rendering
In Chrome v41, it's there, but in a slightly different spot.
There's an easy way to debug your print stylesheet without switching any media attribute in your HTML code (of course, as pointed out, it doesn't solve the width / pages issue):
Use Firefox + Web Developer extension.
In the Web Developer menu, choose CSS / Display CSS by Media Type / Print
Go back to Web Developer menu, choose Options / Persist Features
Now you are viewing the print CSS and you can reload your page indefinitely.
Once you're done, uncheck "Persist Features" and reload, you'll get the screen CSS again.
HTH.
Chrome's UI is different again as of v53.
I don't need to use this feature often, but whenever I do, it takes me forever to figure out where the Chrome team has moved it since the last time I burned cycles trying to track it down.
Notice it's the ... menu in Dev Tools pane not the ... menu in Chrome Browser pane.
Now scroll down in the Rendering section. It's often below the fold.
Following up to the answer by rflnogueira, the current Chrome settings (40.0.*) will look like below:
Just show the print stylesheet in your browser using media="screen" while debugging. The print preview view uses the same rendering engine as normal browsing mode so you can get accurate results using that.
2019 - Updated instructions
Open Chrome inspector
From Mac => option + command + i
From Windows => F12
Click on the little 3 dots, customize and control devTools
Select More Tools
Select Rendering
Scroll to the bottom to Emulate CSS Media
Select print from the down arrow
If you have a print function that rewrites the content of the page to a new window with your print style sheet referenced you'll get a much better idea of what its going to look like on paper , and you'll be able to debug it with the likes of firebug too.
Heres an example of how this can be done with JavaScript / jquery
$("#Print").click(function () {
var a = window.open('', '', 'scrollbars=yes,width=1024,height=768');
a.document.open("text/html");
a.document.write("<html><head>");
a.document.write('<link rel="stylesheet" href="css/style.css" />');
a.document.write('<link rel="stylesheet" href="css/print.css" />');
a.document.write("</head><body>");
a.document.write($('#Content').html());
a.document.write('</body></html>');
a.document.close();
a.print();
});
In Firefox (87.0), the "DOM and Style Inspector" has a toggle button for print media simulation.
One drawback is that it does not clearly delineate the page boundaries.
In DreamWeaver there is a toolbar that shows virtually any rendering option you want:
screen, print, handheld media, projection screen, tv media, desitn time style sheets, etc.
This is what I use especially because it: instantly shows a preview with 1 single press of a button.
I use macros to send keypress and mouse clicks repeatedly.
Under Windows, AutoHotKey is a great software and under OS X you can read about Automator sort of an alternative AHK for OsX.
Under Windows (replace Ctrl by Cmd under OS X) "Ctrl-s / switch to Fx window wherever it is in the list of windows opened / Ctrl-r" bound to 1 unused key avoids frustration from uninteresting tasks and will ultimately save my arms from RSI :)