Category Archives: CSS

WHAT IS THE BEST WAY TO CONDITIONALLY APPLY A CLASS?

What is the best way to conditionally apply a class?

The best way is to apply a ternary operator to the view element.
For ex. ng:class=”( = = = ) ? : <else,apply false condition>”.
In the above syntax, we check for the condition if the current value id equal to the required value. If it is true, then the first assigned class is applied. If it is false, then the second assigned class is applied
 
 
 
 
 
 

HOW TO WRITE CSS MEDIA QUERIES IN IE8?

How to write CSS media queries in IE8?

Internet Explorer versions before IE9 do not support media queries. But we use IE’s conditional commenting to achieve this. Using this, you can specify an IE 8/7/6 specific style sheet which over writes the previous rules.

For example:

<link rel=”stylesheet” type=”text/css” media=”all” href=”style.css”/>
<!–[if lt IE 9]> <link rel=”stylesheet” type=”text/css” media=”all” href=”style-ie.css”/>
<![endif]–>

This won’t allow for a responsive design in IE8, but could be a simpler and more accessible solution than using a JS plugin.

USING CSS, HOW TO MAKE THE BACKGROUND OF AN ELEMENT TRANSPARENT/SEMI-TRANSPARENT BUT HAVE THE CONTENT (TEXT & IMAGES) OF THE ELEMENT OPAQUE?

Using CSS ,how to make the background of an element transparent/semi-transparent but have the content (text & images) of the element opaque?

Give opacity as 0.5 in your background color rgba like background-color:rgba(255,0,0,0.5); based on your color in your style property of the element tag.

Eg.
<p style=”background-color: rgba(255,0,0,0.5);”></p>

FLOATING ELEMENTS – HOW TO USE THEM, TROUBLES WITH THEM, AND HOW TO WORK AROUND THE TROUBLES?

Floating elements – how to use them, troubles with them, and how to work around the troubles?

Float property is used for wrapping text around images, Floats can be used to create entire web layouts and are also helpful for layout in smaller instances.

The CSS float property allows a developer to incorporate table-like columns in an HTML layout without the use of tables

One of the most common symptoms of float-heavy layouts is the “collapsing parent”. One of the most common ways to fix a collapsed parent element is to place an element with the clear property after our floated element. This will cause the parent to begin reflowing after the floated element. In IE 7, the Bottom Margin Bug is shown when a floated parent has floated children inside it, bottom margin on those children is ignored by the parent.

Quick fix:using bottom padding on the parent instead.

IN CSS, WHAT DOES IT MEAN BY FLOATING ELEMENTS – HOW TO USE THEM, TROUBLES WITH THEM, AND HOW TO WORK AROUND THE TROUBLES?

In CSS, what does it mean by Floating elements – how to use them, troubles with them, and how to work around the troubles?

Float property can be used to align an entire block element to the left or right such that other content flows around it.

For instance, Float is used for wrapping text around images or create table-like columns in an HTML layout without the use of tables.

The most common problems of float-heavy layouts are:

The “collapsing parent”.

(a) Fix 1: one of the most common ways to fix a collapsed parent element is to place an element with the clear property after the floated element. This will cause the parent to begin reflowing after the floated element.

(b) Fix 2: There is a method that allows a parent element to clear itself of any floated elements inside it. It uses a CSS property called overflow with a value of hidden. Note that the overflow property was not intended for this type of use, and could cause some issues such as hiding content or causing unwanted scrollbars to appear.

In IE 7, the Bottom Margin Bug is when if a floated parent has floated children inside it, bottom margin on those children is ignored by the parent. Quick fix:using bottom padding on the parent instead.

IS IT POSSIBLE TO APPLY CSS TO HALF OF A CHARACTER/WORD?

Is it possible to apply CSS to half of a character/word?

Yes, by using :before and :after, we can achieve this. However, for dynamic data, we may have to use JQUERY.

Only CSS (static text)

<h1></h1>
h1:before {
content: ‘Exam';
color: #0000ff;
font-size: 32px;
}
h1:after {
content: ‘ple';
color: #ff0000;
font-size: 32px;
}

Result:
CSS to half of a character