We have a large CSS file with many styles that contains overriden styles like this:
.block {
width: 100px;
}
...
.block {
width: 200px;
}
We want to automatically remove unused styles and get as result only 1 style property value for the class like this:
.block {
width: 200px;
}
https://purifycss.online/ - This does not solve our problem.
purifycss
How can I do it having only html and CSS files?
Related
I am having a problem with some new CSS due to an update of our plugin. The page in question is here: https://www.renophil.com/event/ghostbusters-in-concert/
Basically from the title below the image down to the share icons should be a left column. Then the description that starts with "Kick off your Halloween weekend..." should be a larger right column.
We are using Wordpress and Visual Composer. The left column uses the class of vc_col-sm-4 and the right uses vc_col-sm-8. These are set to have the correct widths and work on mobile devices.
.vc_col-sm-4 {
width: 33.33333333%;
}
.vc_col-sm-8 {
width: 66.66666667%;
}
The problem is that the plugin we use for the events (The Events Calendar) has this CSS rule:
.tribe-events-single>.tribe_events>:not(.primary,.secondary,.tribe-events-related-events-title,.tribe-related-events) {
order: 1;
width: 100%;
}
which is overriding the width of my columns mentioned above. I thought I could fix it with width:auto but it didn't work. Is there a way to cancel it or do I have to add !important to the .vc-col-sm-4 and .vc-col-sm-8 code?
Try adding specificity to the classes controlling the widths when that overriding events class is present. This should help get you in the right direction.
#media (min-width: 768px) {
.tribe-events-single > .tribe_events .vc_col-sm-4 {
width: 33.33333333%;
}
.tribe-events-single > .tribe_events .vc_col-sm-8 {
width: 66.66666667%;
}
}
The CSS rule:
.tribe-events-single>.tribe_events>:not(.primary,.secondary,.tribe-events-related-events-title,.tribe-related-events) {
order: 1;
width: 100%;
}
has a greater DOM precision and has priority. You can use !important as you said:
.vc_col-sm-4 {
width: 33.33333333% !important;
}
.vc_col-sm-8 {
width: 66.66666666% !important;
}
or add Additional CSS from the theme preview mode and target the id element #tribe-events-content
div#tribe-events-content div.vc_col-sm-4 {
width: 33.33333333%%;
}
div#tribe-events-content div.vc_col-sm-8 {
width: 66.66666666%;
}
I want through angular-ngStyle, apply some css styles in Table data.
Logic is already done: "When table width is less then 1250px, apply some css styles;"
Here is code for that:
export class NanoTableComponent {
/**
* This is function which check table width and apply styles if table width is less then 1250px;
* But problem is to puting this logic on right place in html.
*/
tableStyle(tableWidth: number) {
console.log('Table Width: ' + tableWidth);
return tableWidth < 1250 ? { 'min-width':'75px;','flex':'none;' } : { 'flex': '1' };
}
}
In the Scss class
// ********* HERE IS THE PROBLEM **********
// IF in this thid div I made next change: flex: none; and min-width: 75px;
// I get what I want. But I want that only if table width is less then 1250px;
// That means I need to add that style dynamically through angular,
// problem is where in html to apply this styles.
> div {
flex: 1;
display: flex;
overflow: hidden;
margin: 0 2px;
> span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
Here is stackblitz with html, typescrypt and scss files.
This does not work but you can saw entire code related with this table:
https://stackblitz.com/edit/angular-css24?file=src%2Fapp%2Fnano-table%2F_nano-table.scss
Question is: how to found on html that "div" styles, from scss file, and apply to that div styles dynamically?
My goal is to make this "Name" column bigger to add more width to it:
Add a class to your table based on the width
<div class="nano-table-row nano-table-grid-header" #table [class.small]="table.offsetWidth< 1250" >
And then encapsulate your csscific CSS rules with that class
.small
{
//specific rules here
}
I'm just curious to know if it is possible to have specific stylings based on the name of of a class.
For example, Bootstrap 4 has a helper class for margins and padding like:
<div class="m-t-1 p-a-0"></div>
This gives the div 1em of margin to the top, and removes padding from all sides.
I am sure they have pre-styled this class in their CSS to achieve this.
But I am curious if there is a way to use the class as a variable.
for example:
<div class="fs-x"></div>
where x can be any number, this class would then give the styling the font-size: x to the div.
Is this possible to do?
Thanks.
You can use a CSS pre-processor such as SASS or LESS to achieve this however it generates static classes within a specified range below is an example from the SASS documentation:
$class-slug: for !default
#for $i from 1 through 4
.#{$class-slug}-#{$i}
width: 60px + $i
Which emits this CSS:
.for-1 {
width: 61px;
}
.for-2 {
width: 62px;
}
.for-3 {
width: 63px;
}
.for-4 {
width: 64px;
}
All CSS classes must be explicitly defined. So every variation if X would need to exist in a .css file
you can use constant in css for example
$x = 10px;
img{
margin-bottom : $x;
}
but however you can declare variables with this way
:root {
--color-principal: #06c;
}
#foo h1 {
color: var(--color-principal);
}
I'm working on a CSS file and I'd like it to interact with anothet CSS file.
How? Let's say I have A.css and B.css. In A.css I want to do the "overflow: hidden" referred to B.css and all the elements that it controls.
Is anything like that impossible?
Like:
#import "field.css"
.sky .field {
overflow:hidden;
}
So basically this what I actually have:
.sky {
width: 90%;
height: 100%;
background: blue;
opacity: 0.7;
position: absolute;
z-index: 1;
}
.field {
width: 100%;
height: 20px;
background: green;
position: fixed;
top: 90%;
z-index: 2;
}
.field > p {
width: 100%;
height: 40px;
background: black;
}
Now I want that "p", which is a sub-tag of .field to not show outside of the bounds of .sky.
How do I do that?
No need to import one CSS file into the other simply link to both CSS files in your HTML. For example if you had the following two files
File A:
.sky .field {
overflow:hidden;
}
File B:
.sky {
color: black;
}
Sky would inherit both properties of overflow hidden and color black. If the rules contradict each other for example file A says sky color is blue and file B says black then the CSS rule sheet which is linked last will take presidence.
Edit: Generally it isn't good practise to do this for organization purpose. If Sky is a single objection consider putting all CSS references to it in a single file.
Load both the CSS files into your page. You can actually have multiple files which define style rules on same element. So lets say you have two file
File 1
.sky{
background-color: Red;
}
And File 2
.sky.field {
overflow:hidden;
}
And lets say the page has a element with class div and field.
<div class='sky field'></div>
Now this will have both the combined CSS rules.
Also make sure you get yourself familiar with CSS Priorities, If 2 files have the different CSS rule on the same element then what happens??
Example
//File 1
.sky{
background-color: Red;
}
//File 2
.sky.field {
background-color: Blue;
}
Now the file that is placed last in the HTML DOM will have more priority over other rules. Note that its NOT the last file loaded but the last file in the DOM hirarchythat gets the priority.
I have done the following:
#my-el .some-class {
width: 10%;
}
That works but now I'd like to apply the same class to the element #my-new-el. I've tried:
#my-el #my-new-el .some-class {
width: 10%;
}
But this does not work. What would be the correct syntax to achieve this ?
If .some-class only applies to descendents of #my-el and #my-new-el then you need to specify the two selectors in full, separated by a comma:
#my-el .some-class, #my-new-el .some-class {
width: 10%;
}