• Whizzystack Solutions

LATEST UPDATES OF CSS TO KNOW



Flexbox Gaps

We can use margins to space out grid items, the great thing about the gap feature is that you just only get gaps between your items; you are doing not find yourself with additional space to account for at the beginning and end of the grid. Adding margins has typically been how we've got created space between flex items. to make an everyday space between flex items, we use a margin. If we don't desire a margin at the beginning and end, we've got to use a negative margin on the container to get rid of it.

Gap Support For Flexbox


You can use the subsequent query, to test if you've got gap support for flexbox

@supports (display: grid)

}


If we test for a gap: 20px, we'd get a positive response in Chrome which currently doesn't support gap in Flexbox but does support it in Grid.


Native Masonry Support


Developers often ask if CSS Grid may be accustomed create a Masonry- or Pinterest-styled layout.


Grid isn't masonry because masonry uses row wise arrangement. Grid aligns elements in rows and columns.


Subgrid


The extent 2 of the CSS Grid Layout includes a subgrid value for both grid-template-columns and grid-template-rows.


The CSS Subgrid solves a typical problem with nested grids. Currently, the subgrid only works on Firefox.


.grid {
 display: grid;
 grid-template-columns: repeat(9, 1fr);
 grid-template-rows: repeat(4, minmax(100px, auto));
}
 
.item {
 display: grid;
 grid-column: 2 / 7;
 grid-row: 2 / 4;
 grid-template-columns: subgrid;
 grid-template-rows: subgrid;
}
 
.subitem {
 grid-column: 3 / 6;
 grid-row: 1 / 3;
}


Prefers-Reduced-Data


This is a media feature that permits CSS to test if the visitor has enabled data saving in their device and adjust the web site accordingly.


• no-preference


The user has made no preference to cut back data. This keyword value evaluates as false within the boolean context.


• reduce


The user prefers lightweight alternate content.


@media (prefers-reduced-data: reduce) ">

}


The site could render a smaller image per the preference of a user who has turned on data-saving mode.


::marker


The ::marker may be a pseudo-element. It allows us to focus on the list marker that's we are able to change list bullet’s color or size. This wasn't possible before because the entire list item had to be targeted earlier.( text and marker)


Only the subsequent properties are allowed with ::marker as a selector:

• All font properties

• Color

• The content property

• text-combine-upright

• unicode-bidi

• direction properties

Consider an example,


ul li::marker
 
{
 color: red;
 font-size: 1.5em;
} 

We will be happy to answer your questions on designing, developing, and deploying comprehensive enterprise web, mobile apps and customized software solutions that best fit your organization needs.

As a reputed Software Solutions Developer we have expertise in providing dedicated

remote and outsourced technical resources for software services at very nominal cost. Besides experts in full stacks We also build web solutions, mobile apps and work on system integration, performance enhancement, cloud migrations and big data analytics. Don’t hesitate to get in touch with us!

37 views
 You can unsubscribe in one click, and I will never share your email address.

About Whizzystack

  • LinkedIn
  • Facebook
  • Twitter
  • Instagram
  • RSS

We are User Experience Consultant, Conversion Rate Optimization Specialist and expert in digital transformation. We help savvy marketers, product owners and UX advocates make the case that a useable, accessible and people-first experience is the best path to business success. All the while pursuing his not-so-hidden agenda. We also build & support your own talented, trusted, full-time development team hosted out of Whizzystack’s headquarters in India. We also deliver world class product and software development services Read more

What We Do

Software Development

Web Application Development

Mobile Application Development Web Portal Development

Ecommerce Development

Custom Software Development

Web Presence

UI/UX Development

Digital Marketing

Social Media Management

Search Engine Optimization

Online Reputation Management

Web Experience

UI/UX Prototyping

System Designing

Service Designing 

System Integration

Performance Optimization

Our Developers

Contact Whizzystack

USA :     +1(877)3685420

India:    +91(95)60641297

              +91(120)4287309

111, Pemberton Brown Mills Road,

Brown Mills, New Jersey, USA, 08015

Bouleward Walk, Habitapur, Noida, Uttar Pradesh, India, 20109