We Keep Coding

Why does the shadow host get focus even with delegatesFocus being false?

Consider the following example:
let template = document.querySelector('.quote-template').innerHTML;
let shadowElement = document.querySelector('.quote-app');
let shadow = shadowElement.attachShadow({
mode: 'open'
});
shadow.innerHTML = `
<style>
.quote {
font-family: Arial;
font-size: 20px;
padding: 25px 40px;
background-color: #000;
font-weight: 300;
line-height: 24px;
color: #fff;
margin-bottom: 15px;
}
.quote:focus {
color: red;
}
</style>
${template}
`;
console.log(document.querySelector('.quote-app').shadowRoot.delegatesFocus)
.quote-app:focus {
outline: 2px dotted red;
}
<template class="quote-template">
<div class="quote">
Use mouse right click on the test button and you will see red outline on the shadow root.
<button>Test focus</button>
</div>
</template>
<div class="quote-app"></div>
As you can notice, when the "test focus" button gets focus, the parent shadow host also get :focus styles. Now, the MDN docs say that
If true(delegatesFocus), when a non-focusable part of the shadow DOM is clicked, the first focusable part is given focus, and the shadow host is given any available :focus styling.
It doesn't say anything about when a focusable part gets focused. Here in my scenario delegatesFocus is false, why does the shadow host get the :focus styling?
P.S: The observed behaviour contradicts google web.dev's documentation. They mention:
If you were to set delegatesFocus: false, here's what you would see instead:
The outer black dotted outline turns into red in reality, contradicting the image.

SASS Mixin typography issue while implementing multi language

I am working on a react website which use sass for managing styling. So in the website I have implemented typography for english language through sass mixins.
There are different headings and bodies in the typography like heading1, heading2 , body1, body2 etc . Format of each element in typography is like
#mixin body1{
font-size:10px,
font-weight: 700,
letter-spacing: 1px,
line-height:1
}
#mixin body2{
font-size:5px,
font-weight: 400,
letter-spacing: 1px,
line-height:1
}
And then I include this body in my component css like :
.primaryButton .text{
#include body1;
}
.secondaryButton .text{
#include body2;
}
so button is single component is react , we are just changing parent class based on variation props and so its styling .
Now the issue is that I have to implement typography for different languages like about 50 languages and I an not sure what generic approach will be best to implement .
Note :
We didn't use generic classes instead of mixin for typography because we have variation and theme for each component and for each variation and theme same element may have different font size and other properties so for different variation we load different typography elements based on component parent class.
Also I don't want to go in each file and then overwrite english typography based on parent class for each language as project size is too big for that and also 50 languages is also too many for that approach. And in future language can increase .

you can use like this
Placeholders
%body1{
font-size:10px;
font-weight: 700;
letter-spacing: 1px;
line-height:1;
}
%body2{
font-size:5px;
font-weight: 400;
letter-spacing: 1px;
line-height:1;
}
%body3{
font-size:5px;
font-weight: 400;
letter-spacing: 1px;
line-height:1;
}
Configs
$langsConfig: (
"en": (body2),
"fr": (body1, body2),
"cn": (body2, body3),
"bn": (body1, body2, body3),
);
css generator
#each $lang, $placeholderList in $langsConfig {
.#{$lang} {
.primaryButton {
.text {
#each $placeholder in $placeholderList {
#extend %#{$placeholder}
}
}
}
}
}
Output
.bn .primaryButton .text, .fr .primaryButton .text {
font-size: 15px;
font-weight: 700;
letter-spacing: 1px;
line-height: 1;
color: red;
}
.bn .primaryButton .text, .cn .primaryButton .text, .fr .primaryButton .text, .en .primaryButton .text {
font-size: 20px;
font-weight: 400;
letter-spacing: 1px;
line-height: 1;
color: green;
}
.bn .primaryButton .text, .cn .primaryButton .text {
font-size: 25px;
font-weight: 400;
letter-spacing: 1px;
line-height: 1;
color: yellow;
}
React implementation
export default function App() {
const lang = "en";
return (
<div className={`${lang}`}>
<div className="primaryButton">
<h1 className="text">Hello CodeSandbox</h1>
<h2 className="text">Start editing to see some magic happen!</h2>
</div>
</div>
);
}
Explanation:
Placeholder: Instead of mixing use placeholder.
Config: Language name and related mixing list
Generator: it will make a loop with configs and create the css is dynamic ways
NOTE: if you want to use component based scss. Then create a scss function and pass the variables in css generator.
Here is the Sandbox link
Let me know if it helps. It could be more dynamic if i could know the implementation on react side.

How to update a div's style background-color to none using jQuery

My brain is going crazy on figuring out how to modify the background color within a div that has a class, with an inline style controlling the color of the div.
I'd like to know how I would be able to change the background color from within one div but leave the other div's background color intact. As you can see, the div's contain the same class names, but the inline style color is what I'm trying to update. I'm also unable to modify the structure of the html page, otherwise, this would be a piece of cake.
With a css class I can write something like this to look at the current class and replace it with another class but In this situation this isn't an option since this syntax would change all the divs with the similar divs.
$('.tx-cal-event').toggleClass({"sx-abc-event"});
<div class="nx-cal-event nx-cal-event-month" style="background-color: rgb(182, 232, 198);"></div>
<div class="nx-cal-event nx-cal-event-month" style="background-color: rgb(128, 128, 128);"></div>
<div class="nx-cal-event nx-cal-event-month" style="background-color: rgb(166, 166, 166);"></div>
I imagine to somehow identify the one color in a div and make it transparent via a button. I have the button variable but its the actual syntax for changing the color when it is referenced in an inline style element.
Any help would be appreciated.

Based on the code pen snippet I modified the selector to use the pseudo selector. This snippet hides the other two divs and retains the styling for the 1st one.
Code Pen link :https://codepen.io/charanrajgolla/pen/MQeYmB
More information about n-th Child can be found over here: https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child
Code Sample :
$(document).ready(function() {
$("button").click(function() {
$(this).parents('.dimensions').find('p:nth-child(2n+1), p:last-child').fadeToggle(700);
});
});
/* This is the css in question */
.tx-cal-event {
color: black;
font-family: "ABeeZee";
}
.sx-abc-event {
font-size:100%;
background-color: #CCC!important;
border-radius: 2px;
overflow: hidden;
}
.nx-cal-event-month {
padding: 20px;
border-radius: 3px;
}
/* this css is for formatting of the elements and not important in finding what is being asked for */
body {
background-color: #000;
font-size: 80%;
color: black;
}
.dimensions {
width: 300px;
margin: 0 auto;
padding-top: 20px;}
.btn-css {
background: rgb(0,112,210);
color: white;
padding: 10px 20px 10px 20px;
border: none;
border-radius: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dimensions">
<button class="btn-css">Click Button</button>
<p class="tx-cal-event nx-cal-event-month" style="background-color: rgb(182, 232, 198);">
If I click the button, 1 and 2 should be hidden, but this row should remain visible, alongwith keeping the background-color value of <br>rgb(182, 232, 198).</p>
<p class="tx-cal-event nx-cal-event-month" style="background-color: rgb(128, 128, 128);">1. This Should Dissappear</p>
<p class="tx-cal-event nx-cal-event-month" style="background-color: rgb(166, 166, 166);">2. This Should Dissappear</p>
</div>

you can try
$('#tx-cal-event').css({'background-color':'transparent'});

Try below jquery:
$('.tx-cal-event').css('background-color', 'transparent !important');
Or define this css in you class like below
<style>
.bg-none{
$background-color: transparent !important;
}
</style>
// Then in your javascript
<script>
$('.tx-cal-event').addClass('bg-none');
</script>

Change background-color to initial using css() jQuery. No need to use !important
Stack Snippet
$("div.nx-cal-event.nx-cal-event-month").css({
"background-color": "initial"
});
.nx-cal-event.nx-cal-event-month {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nx-cal-event nx-cal-event-month" style="background-color: rgb(222, 174, 234);"></div>

To remove the inline style property use css method with an empty string as second parameter:
Setting the value of a style property to an empty string — e.g. $( "#mydiv" ).css( "color", "" ) — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property. As a consequence, the element's style for that property will be restored to whatever value was applied.
Usage
$('.tx-cal-event').css('background-color', '');

Font size change without javascript

I have a below code where I am trying to increase or decrease the font size of text. If JavaScript is disabled in my browser, I am not able to increase or decrease the size of the text. Is there any way to do without JavaScript as my browser does use JavaScript for security reasons. Any suggestions will be really helpful.
JSFIDDLE
<html>
<head>
<style type="text/css">
.Small{ font: 12px Times New Roman, Arial, Sans-Serif; }
.Medium{ font: 15px Times New Roman, Arial, Sans-Serif; }
.Large{ font: 18px Times New Roman, Arial, Sans-Serif; }
</style>
<script language="JavaScript">
function changeFont(styleSheet)
{
document.getElementById('textArea').className=styleSheet;
}
</script>
<noscript>Your browser does not support JavaScript!</noscript>
</head>
<body>
<span class="Small" id="textArea">Test which will change size</span>
<br><br><br>
Small
Medium
Large
</body>
</html>

I think someone mentioned about this, Javascript should be runnable for most of the cases so don't worry about it, although CSS hack is fun but sometimes not really useful in terms of readability, reliability and compatibility.
html, body { font-family: "Arial"; }
.content { font-size: 10px; }
.small:checked ~ .content { font-size: 10px; }
.medium:checked ~ .content { font-size: 20px; }
.large:checked ~ .content { font-size: 30px; }
<input class="small" name="font-radio" type="radio" checked="checked"/>
<input class="medium" name="font-radio" type="radio"/>
<input class="large" name="font-radio" type="radio"/>
<div class="content">I can change fontsize without Javascript!</div>

There are no good ways.
You could do a really horrible hack involving checkboxes, the :checked pseudo-class, the general sibling combinator and some non-semantic markup … which would also massively constrain your design options.
Browsers come with built-in tools for adjusting the size of content. Focus on creating a fluid, responsive design instead. Let sizing issues be handled with the built-in zooming features of the browsers.

As a general statement, once the page has been rendered and DOM was built, you can't change it without JavaScript. That's what JavaScript is supposed to do and that's what you are supposed to use.
As another general statement, "my browser does not use JavaScript for security reasons", in most cases, simply shows lack of proper understanding of how web works today and, for the most part, it is plain wrong.
In other words, today, no pages, including payment portals, do not disable JavaScript and, when properly coded, JavaScript is safe.
However, you could do this using CSS by, for example, (un)checking/selecting hidden checkboxes/radio buttons and having elements styled differently after a :checked or :not(:checked) element.
Here's a simple example:
.content {
font-size: 1.2rem;
}
#font-size-medium:checked ~ .content {
font-size: 1.8rem;
}
#font-size-large:checked ~ .content {
font-size: 2.7rem;
}
/* the rest is just styling, can be ignored for the purpose of the exercise */
#font-size-small:checked ~ [for="font-size-small"],
#font-size-medium:checked ~ [for="font-size-medium"],
#font-size-large:checked ~ [for="font-size-large"] {
background-color: #f5f5f5;
color: black;
}
[for^="font-size"] {
padding: .5rem 1rem;
border: 1px solid #ddd;
display: inline-block;
margin: 0 .5rem 1rem 0;
cursor:pointer;
color: #999;
}
[for^="font-size"]:hover {
background-color: #f5f5f5;
}
[name="font-size-change"] {
position: absolute;
z-index: -1;
visibility: hidden;
}
<input type="radio" id="font-size-small" name="font-size-change" checked>
<input type="radio" id="font-size-medium" name="font-size-change">
<input type="radio" id="font-size-large" name="font-size-change">
<label for="font-size-small">Small</label>
<label for="font-size-medium">Medium</label>
<label for="font-size-large">Large</label>
<div class="content">
Put the text you want changed here...
</div>
But please note this change in rendering happens without changing anything in DOM. The elements remain the same, you're only changing what CSS rules apply to them, by (un)checking <input>s.

CSS style is not applying to button in React component

I have my CSS stylesheet in my index.html file where my React app is loaded. In here I have the following CSS values :
#Webshop {
background-color: white;
height: 100%;
width: 100%;
}
and
#Webshop, button {
position: relative
border: 6px solid #232323
z-index: 2
padding: 12px 22px
margin: 0 10px
box-sizing: border-box
font-size: 26px
font-weight: 600
text-transform: uppercase
text-decoration: none
color: #232323
}
Webshop is located in a different file that contains this Render method:
render() {
return (
<div className='Webshop' id='Webshop'>
<li>
<img src="./products.jpeg" width="350" height="350"></img>
<button onClick={this.handleClick} className="addit">Add to cart</button>
<select id="size" onChange={this.change} value={this.state.value}>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="x-large">X-large</option>
</select>
<img src="./product.jpeg" width="350" height="350"></img>
</li>
</div>
);
}
For some reason the CSS applies to Webshop but not to the button. I have other Components in other files the work also. How can I get the CSS to apply to the button in the Render method?

The first two are critical, the last two are advices.
1. remove the comma like so:
#Webshop button {
...
}
2. CSS semicolons are a must, while in JavaScript you can omit them, which is being encouraged to do so in Standard.js rules.
3. The img tags should be self-closing like so: <img />. In fact any element without a text within them should follow as well.
4. Avoid using IDs in your CSS. Read more about CSS Specificity.

Try applying button style separately. Currently the second style applies to #webshop and button as you separated them with comma, which is strange, why would you apply same styling to a div element and a button element? Try doing #webshop button or #webshop > button instead and applying button styles separately.
Also you are missing semicolons at the end of each property in the second style bit which is probably an issue here.

Check https://www.w3schools.com/cssref/css_selectors.asp
Right now you are applying
#Webshop, button {
position: relative
border: 6px solid #232323
z-index: 2
padding: 12px 22px
margin: 0 10px
box-sizing: border-box
font-size: 26px
font-weight: 600
text-transform: uppercase
text-decoration: none
color: #232323
}
to all elements that either have Webshop id or are buttons,
it should look more like
#webshop button {
...
}