it there a way to make the HTML elements be in dark mode
if the user has activated in his system "dark mode"
and if the user is like to use standard colors, to be "light mode"
all this automatically when the user opens the website.
without any buttons.
and I want that if the user changes the theme color preference from the setting, it will automatically switch to the correct one directly without refreshing the page.
the black and white color of text, I want that don't use any CSS
so not using CSS. in this project I am using only HTML.
<!-- here is example of tags to color automatically for the answer -->
<h1>
<span>hello world<span>
<input>
if there a way to do this with one line or 2 maximum.
maybe adding a library with no configuration needed, but I don't find it
add this CSS property color-scheme: light dark; to the <html> css selector (is only one line of css)
OR if you need only html you can use this <meta> tag
<meta
name = "color-scheme"
content = "light dark"
/>
https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
watch this youtube video for more details: https://youtu.be/n3lcjY4Mm00
it does all the things you listed before!
<html>
<head>
<meta name="color-scheme" content="light dark">
</head>
<body>
<h1>hello world</h1>
<span>hello world</span>
<input type="text" placeholder="hello world">
</body>
</html>
You can add meta tag in your section if you want to use only HTML. You can use it like this:
<head><meta name="color-scheme" content="light dark"></head>
<body>
<h1>
<span>hello world<span>
<input>
</body>
Hope this helps you.
Related
I'm adding WCAG accessibility to non-Google display ads. I produce ads using transparent PNGs that tween to 0,0 to animate and build the ad and to show the focus/hover state. Our text in the ad is part of the PNGs. My simplified code below is:
<!DOCTYPE html>
<html>
<head>
<meta content="width=300,height=250" name="ad.size">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<title>300x250</title>
<link href="300x250.css" rel="stylesheet" type="text/css">
<script defer src="https://url.com/script-that-animates-images/" type="text/javascript"></script>
</head>
<body>
<div id="container">
<a href="https://url.com" title="Advertisement — Text that repeats the image's text. Call to action." id="rolloverCatch">
<div id="content">
<!-- animated images that include the text -->
<img src="https://www.fillmurray.com/300/250">
</div>
</a>
</div>
</body>
</html>
I've added title to the anchor — on hover the image text is repeated — but is that correct and enough? (e.g., alt is for images, title for links, is this correct?) I realize the ideal situation would be to render plain text but what more can be done to better align with accessibility requirements using only images in a display ad? On the images themselves, should I be adding aria-hidden=true? Is there an appropriate reference to use here?
Concerning Google display ads, is the accessibility functions added within that system? I'm tracking I do not have anchors within the uploaded HTML source, should Google display ads have alt text on the top-most image instead?
I'm using accessibleweb.com and Disability Studies Quarterly as references for the above but I'm having trouble finding timely or better resources.
I think in your example the most natural way to do it is to add an alt attribute to the <img> element:
<div id="container">
<a href="https://url.com" id="rolloverCatch">
<div id="content">
<!-- animated images that include the text -->
<img src="https://www.fillmurray.com/300/250" alt="Advertisement — Text that repeats the image's text. Call to action.">
</div>
</a>
</div>
When the <a> element has a text, or another element having itself an accessible name between its opening and closing tags, it takes that as its own accessible name.
And by the way, all the images that have something meaningful must have an alternative text (with alt, aria-label or aria-albelledby).
I am using Sublime text to write some HTML and CSS files. I've created my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>RainyDayBakes</title>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 style="text-align:center">RainyDayBakes</h1>
<nav style="text-align:center">
<a href=”C:\Users\sarah\Documents\Simmons\CS-321\page1.html”> About </a>
<a href=”page2.html”> Menu </a>
<a href=”page3.html”> Gallery </a>
<a href=”page4.html”> Order </a>
<a href=”page5.html”> Contact Us </a>
</nav>
<img src="cake.png" alt="oreo crumble cake" class="center">
<h3>Welcome to RainyDayBakes!</h3>
<p>We are a local bakery specializing in creative cakes, cupcakes and cookies!</p>
<p>In addition to being open daily we also offer custom ordered confections.</p>
<!-- Scripts -->
<script src="scripts/index.js"></script>
</body>
<footer>
</footer>
</html>
my page1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>This is Page One </title>
</head>
<body>
</body>
<footer>
</footer>
</html>
and my style.css:
<style>
h1 {
color:red;
}
</style>
When I try to run index.html in Chrome, the link to page1.html says it doesn't exist, and the CSS won't show up. They're all in the same folder, I've saved all the files, and I'm running on Chrome. Every other solution I've found refers to making a typo, the directories being different, etc. but as said, they're all in the same folder, and I haven't noticed a typo (but it's entirely possible when you're too close to your code).
First off, you're not even using the tag anywhere in your code, so that's why the style isn't showing up. Secondly, if they are in the same folder, just link your about page to page1.html; not the full directory listings.
You are using typographical quotes in your links' href attributes, which won't work. Change those to regular quotes.
Let the link be this way instead href=”page1.html”
You might want to put a link to your CSS file on all your pages, I don't see it on your page1.html You probably already know about this resource but I mention it just in case you don't: W3 Schools is very handy for a quick reference to a lot of HTML/CSS questions.
So you have two issues:
For page1.html, would suggest adding file:// or file:/// to the beginning of the href element, or maybe retyping the line since the other links worked
For your CSS, remove the tag, it's for when you put the style inside the HTML file(embedded)
This isn't an issue with your code. I was having the same exact problem too and i recently discovered that the problem likely lies in the IDE that you're using. I was using stackblitz and recived the same output. But when i switched to an online compiler and litteraly copy & pasted the code with the same file names, the code started working correctly. Try using an online compiler and see how that works out for you. It worked for me.
The compiler I used is:
https://www.onlinegdb.com/
make sure to switch the languate to HTML using the language dropdown on the top right corner.
A single color, old lace, is not working for me as a theme-color in the meta tag in Chrome Android.
Other colors work well. I tried providing the hex triplet instead and still nothing.
<html>
<head>
....
<meta name="theme-color" content="oldlace"> <!-- content="#fdf5e6" doesn't work either -->
....
</head>
<body>
....
</body>
</html>
It just appears as the default white instead of the wanted color.
Here is a description from WHATWG
When using the theme color in UI, user agents may adjust it in implementation-specific ways to make it more suitable for the UI in question.
Color #fdf5e6 is a QUESTION here, because its too light to have a enough contrast.
Same problem with color #f5f5f5f and any other light colors.
Following code, buttons different only by one style setting, produces dramatically different button looks. Not only is the background color changed, but also the border style, rounded corners, and gradient. I guess losing the gradient isn't too surprising, but the others are, to me. Can anyone explain why? Output of following code is viewable here. I found lots of "solutions" for how to style the button like the default, but why does the default change so dramatically when just trying to change the background color?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="favicon-index.ico" type="image/x-icon" rel="shortcut icon">
<link href="/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>test buttons</h1>
<input type="button" value="gradient">
<input type="button" value="background-color" style="background-color: #ff0;">
</body>
</html>
It has to do something how browser renders them. When no styles are applied it uses the native os style. But when style is applied it must draw it from the beginning. since you are only setting the background value, the border and other style attributes are used from browser defaults.
On every os and browser the native buttons look a little different, but with same styles they look the same.
I am using YSlow to measure overall page performance. However, CSS are declared in Head section of the document still YSlow finds css in the body of the document and suggests to put CSS at top. What may be the reason for the same?
I am not using CSS property in hard code or inline style, for inline style I am applying class to that div like <div class="header"></div>. Also in head tag there is external CSS attched like
<head>
<link rel="stylesheet" type="text/css" href="/css/menu.css" />
</head>
But YSlow finds css in body part rather than head section.
Your question is not clear, but I would guess you probably have in line CSS tags
Something like
<div style="float:left">asf asdf</div>
So, your document could be
<html>
<head>
<!--CSS declarations and title etc-->
</head>
<body>
<!--body code etc referencing the exteranl CSS sheets or the CSS declared in the header-->
<div style="color:#366;">These words are in this color</div>
</body>
</html>
I encountered this problem, and found that it was due to having an A tag before my css imports (for claiming Google Plus identity). I moved that tag to just before the closing HEAD tag, and YSlow no longer flags the issue.