Posted by: nilovsergey Jul 15 2023, 11:46 AM
In laravel 8/ coreui 3.4 app page news
CODE
<x-layouts.news>
<x-slot name="title">{{ trans('News') }}</x-slot>
...
<div class="news-content">{!! \Purifier::clean($news->content_shortly) !!}</div>
...
</x-layouts.news>
is based on common app layout/css with resources/views/layouts/news.blade.php
template which has 2 css files include :
CODE
...
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<link rel="stylesheet" href="{{ mix('css/news.css') }}">
...
Problem is that when content_shortly of news has
<i> and <strong>
tags they are not rendered on the form and checking
the page in browser I see that these styles are used from parent html * { : https://prnt.sc/tiYMT3I1NFEo
I search a way to remove these html * { rules on my page BUT without editing css/app.css,
As I encountered this problem when user fills
CODE
<i>
and
CODE
<strong>
tags in ckeditor5
I added at top of my scss
CODE
strong {
font-weight: unset;
}
i {
font-weight: unset;
}
but that does not work anyway and in browser I see : https://prnt.sc/tTObhLlAvgUR
I tried to add style :
CODE
html * {
font-weight: unset !important;
text-decoration: unset !important;
font-style: unset !important;
}
* {
font-weight: unset !important;
text-decoration: unset !important;
font-style: unset !important;
}
But that also did not help - <i> and <strong> tags are not rendered at all...
Posted by: pandy Jul 16 2023, 04:44 AM
I haven't really looked into the unset keyword and don't know how it fairs with inheritance, which would matter in the second example of what you tried. In your first example I think your selector has too low specificity. See if either using a more specific selector or to add !Important helps.
CODE
strong {
font-weight: unset !Important;
}
Posted by: Christian J Jul 16 2023, 05:07 AM
I didn't understand most of the OP (maybe because the screenshots didn't load), but when styling is inherited from a parent element the "unset" keyword may give special results. For example:
CODE
h1 {font-weight: normal;}
h1 strong {font-weight: unset;} /* Makes STRONG element inherit non-bold styling from parent H1. */
or:
CODE
p {font-weight: bold;}
p strong {font-weight: unset;} /* Makes STRONG element inherit bold styling from parent P. */
See also https://developer.mozilla.org/en-US/docs/Web/CSS/unset
Posted by: pandy Jul 16 2023, 06:03 AM
I figured from one of the OPs tries to override and the screen cap that there are reset rules in play, 'html * ...'. Hence a single element selector wouldn't be enough.
Posted by: nilovsergey Jul 16 2023, 09:24 AM
QUOTE(Christian J @ Jul 16 2023, 05:07 AM)
I didn't understand most of the OP (maybe because the screenshots didn't load), but when styling is inherited from a parent element the "unset" keyword may give special results. For example:
CODE
h1 {font-weight: normal;}
h1 strong {font-weight: unset;} /* Makes STRONG element inherit non-bold styling from parent H1. */
or:
CODE
p {font-weight: bold;}
p strong {font-weight: unset;} /* Makes STRONG element inherit bold styling from parent P. */
See also https://developer.mozilla.org/en-US/docs/Web/CSS/unset
My screenshots are loaded ok. Is my question clear ?
Posted by: Christian J Jul 16 2023, 09:26 AM
QUOTE(pandy @ Jul 16 2023, 01:03 PM)
I figured from one of the OPs tries to override and the screen cap that there are reset rules in play, 'html * ...'. Hence a single element selector wouldn't be enough.
But aren't these (partial) reset styles too:
QUOTE
CODE
html * {
font-weight: unset !important;
text-decoration: unset !important;
font-style: unset !important;
}
* {
font-weight: unset !important;
text-decoration: unset !important;
font-style: unset !important;
}
?
Anyway I read now that the STRONG and I elements are not rendered at all:
QUOTE(nilovsergey @ Jul 15 2023, 06:46 PM)
Problem is that when content_shortly of news has
<i> and <strong>
tags they are not rendered
...
But that also did not help - <i> and <strong> tags are not rendered at all...
--is that correct? If so "font-weight" or "font-style" should not matter, rather I suppose the CSS to look for would be e.g. "display: none", "visibility: hidden" or using the same text color as the background.
Posted by: Christian J Jul 16 2023, 09:30 AM
QUOTE(nilovsergey @ Jul 16 2023, 04:24 PM)
My screenshots are loaded ok.
Yes, I see them now.
QUOTE
Is my question clear ?
Not entirely, but see my reply above this. I don't think any value of "font-weight" or "font-style" can prevent text from rendering.
Posted by: pandy Jul 17 2023, 09:43 AM
QUOTE(Christian J @ Jul 16 2023, 04:26 PM)
]
But aren't these (partial) reset styles too:
QUOTE
CODE
html * {
font-weight: unset !important;
text-decoration: unset !important;
font-style: unset !important;
}
* {
font-weight: unset !important;
text-decoration: unset !important;
font-style: unset !important;
}
Where did you find those?
QUOTE
I don't think any value of "font-weight" or "font-style" can prevent text from rendering.
Isn't the text showing up at all? I didn't understand that. Sorry.
Posted by: Christian J Jul 17 2023, 03:43 PM
QUOTE(pandy @ Jul 17 2023, 04:43 PM)
Where did you find those?
In OP.