Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ How to remove rules from css/app.css with my css file?

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. unsure.gif

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? unsure.gif

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. blush.gif

Posted by: Christian J Jul 17 2023, 03:43 PM

QUOTE(pandy @ Jul 17 2023, 04:43 PM) *

Where did you find those? unsure.gif

In OP.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)