5 Tricks Every frontend developer should know

Datalist element

Writing mode

inset shorthand in CSS

Calc() function

hiding an HTML element

Datalist element -

The <datalist> element is an HTML5 element.

It is used to define a list of options that can be associated with an <input> element.
It provides suggestions or options for users as they type in an input field.
Helping them to select an option more easily.

List attribute of input element is used as a ID of datalist

<label for="food">food</label>

<input type="text" id="food" name="food" list="dwr-list">

<datalist id="dwr-list">

<option value="Pizza">

<option value="burger">

<option value="coffee">

<option value="tea">

<option value="fruits">

</datalist>

=============================================================================================

Writing mode - In CSS (Cascading Style Sheets), there are several different writing modes that
determine the direction and layout of text on a web page. Writing modes define the flow of
text, such as whether it should be displayed horizontally from left to right (LTR), right to left
(RTL), vertically from top to bottom (TB), or in a mixture of these directions.

Here are the four main writing modes in CSS:

1. Horizontal (LTR/RTL):
This is the default writing mode in CSS and is used for most web pages.
In this mode, text flows horizontally from left to right (LTR) for languages such as English,
and right to left (RTL) for languages such as Arabic or Hebrew.

Property -

writing-mode: horizontal-tb;

2. Vertical (TB):

In this writing mode, text flows vertically from top to bottom.

This is commonly used for languages such as Chinese or Japanese.

for Vertical RL ⟶ writing-mode: vertical-rl;

for Vertical LR ⟶ writing-mode: vertical-lr;

3. Mixed (TB-RL/LR):

This writing mode combines both horizontal and vertical writing modes.
The text flows vertically from top to bottom, but individual lines are read from right to left (TB-RL) or
left to right (TB-LR).

For TB-RL ⟶

.container {

writing-mode: vertical-rl;

text-orientation: upright;

For TB-LR ⟶

.container {

writing-mode: vertical-rl;

text-orientation: sideways-right;
}

4. Sideways (TB):

In this writing mode, text is rotated 90 degrees and flows from top to bottom in a
sideways orientation.

For Sideways RL ⟶

writing-mode: sideways-rl;

For Sideways LR ⟶

writing-mode: sideways-lr;

These are the main writing modes available in CSS, which allow you to control the direction
and layout of text on your web pages according to the requirements of different languages
and writing systems.

=============================================================================================

Inset shorthand in CSS -

The inset shorthand property in CSS is used to specify the values for the top, right, bottom, and
left properties in a single declaration.

Syntax ---

inset: <top> <right> <bottom> <left>;

Example ⟶

.container {

inset: 10px 20px 30px 40px;

=============================================================================================

Calc() function -

The calc() function is a CSS (Cascading Style Sheets) function that allows you to perform
mathematical calculations within a CSS property value.
Used to set dynamic values for properties such as width, height, margin, padding, and
other numeric values in CSS.
syntax ⟶

calc(expression)

expression is a mathematical expression that can include numbers, operators, and CSS units.

+: Addition
-: Subtraction
*: Multiplication
/: Division

Examples ----

1. Setting the width of an element to a percentage of its parent's width:

.container {

width: 70%; /* 70% of parent's width */

.child {

width: calc(100% - 30px); /* 100% minus 30 pixels */

2. Calculating margins based on the width of an element:

.container {

width: 400px;

margin-left: calc((100% - 400px) / 2);

margin-right: calc((100% - 400px) / 2);

3. Dynamically adjusting padding based on the font size:

.para {

font-size: 18px;

padding: calc(18px + 10px);

=============================================================================================
Hiding an HTML element -

some CSS properties to hide elements -

visibility: hidden;

display: none;

HTML Attribute

<div hidden>This element will be hidden</div>

Type="hidden" attribute

<input type="hidden" name="age" value="age">