Collection of vendor prefixes for advanced CSS3 properties

CSS
HTML

navya, Credit to volkotech-solutions Feb 04

This snippet gives the collection of all the vendor prefixes for some css properties that are not at all supported by the older versions of popular browsers.

Style.css

/* most of the flex properties won’t render in older browser version*/

.selector{
/* prefixes for all the flex properties*/
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}

.selector{
display: -webkit-inline-box;
display: -moz-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;


/* just replace the flex direction as per requirement */
flex-direction: column;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;

/* just replace the flex value as per requirement */
flex: 0 0 48%;
-webkit-flex: 0 0 48%;
-moz-flex: 0 0 48%;
-ms-flex: 0 0 48%;
-o-flex: 0 0 48%;

/* just replace the justify-content value as per requirement */
-webkit-box-pack: flex-end;
-ms-flex-pack: flex-end;
justify-content: flex-end;

-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;

/* for borders */
border-bottom: #000484;
-webkit-appearance: none;

/* for box-shadow */
box-shadow: 0px 0px 0px 1px;
-webkit-appearance: none;
-webkit-box-shadow: 0px 0px 0px 1px;
-moz-box-shadow: 0px 0px 0px 1px;
}

/* for input place holders */
.selector-input::-webkit-input-placeholder {
  color: #293033a6;
}
.selector-input:-moz-placeholder {
  color: #293033a6;
}
.selector-input::-moz-placeholder {
  color: #293033a6;
}
.selector-input:-ms-input-placeholder {
  color: #293033a6;
}

21 likes

Add to read list

Comments

Authors

Navya

Software engineer at VolkoTech Solutions

Dedicated and skilled Drupal Frontend developer, carrying 3+ years of experience with a proven track record of delivering high-quality, scalable web solutions and optimized themes with an organized Git workflow. Proficient in JavaScript, jQuery, HTML, CSS, SASS, Bootstrap, and PHP with a deep understanding of Drupal’s architecture and modules. Strong knowledge of web development best practices and search engine optimization principles.

VolkoTech Solutions

Drupal development company in india

Drupal web development & Consulting company in India.

Must Read

Recent Blogs

Recent Snippets

Must Read

Recent Blogs

Recent Snippets

Must Read

Recent Blogs

Recent Snippets

Collection of vendor prefixes for advanced CSS3 properties

Comments

Authors

Navya

VolkoTech Solutions

Read Next

Open Link/URL in Same Tab/Window or New Tab in HTML & JS

Programmatically check table exists in database in Drupal 8/9

Creating Super Star Mahesh Babu Potrait with HTML and CSS

How to maintain multiple nodes versions in Linux Ubuntu 22

Device Compatibility & Responsive Design: Testing Guide & Best Practice

Building Responsive Web Designs with CSS Media Queries

Standards for creating a user-friendly navigation system

List of standards for better UX(User Experience)

Using CSS Grid and Flexbox to Create Responsive Web Pages

Understanding of CSS3 colors and their contrast ratio

Must Read

Recent Blogs

Recent Snippets

Must Read

Recent Blogs

Recent Snippets

Must Read

Recent Blogs

Recent Snippets

Collection of vendor prefixes for advanced CSS3 properties

Related Posts

Share

Comments

Authors

Read Next