Can you explain the purpose of the property named "-webkit-min-logical-width"?

Recently, I encountered a CSS issue where setting the min-width property worked in Firefox but broke in Webkit. After experimenting with the Chrome inspector, I found that using the property -webkit-min-logical-width with a different value than min-width resolved the layout problems in Chrome! Does anyone know what exactly this property is meant to do? I searched for it online, even on the Webkit website, but couldn't find any information.

UPDATE You can see a live example of this behavior in action in this fiddle. Check it out in both Chrome and Firefox to observe the difference. It seems like it might be an override for min-width?

Answer №1

-webkit-min-logical-width takes precedence over min-width only when it is placed after it. If placed in front, min-width is selected instead.

It seems that -webkit-min-logical-width was likely the initial implementation of min-width for Webkit. The temporary name still functions to ensure compatibility with older websites :).

Just my personal observation!

EDIT:

This link may provide further insight: http://dev.w3.org/csswg/css3-writing-modes/#abstract-dimensions

measure or logical width

A measurement in the inline dimension: refers to the physical width (horizontal dimension) in horizontal writing modes, and to the physical height (vertical dimension) in vertical writing modes. (The term measure derives from its use in typography.)

Answer №2

Avoid using this property as it is non-standard and may be deprecated or removed in the near future. Here's a simple explanation -

When the writing mode is horizontal, min-logical-width functions like min-width.

On the other hand, when the writing mode is vertical, min-logical-width behaves like min-height.

I came across the initial draft specification revision here. If you scroll down a bit, there's a table that matches the properties based on the writing mode.

Furthermore, I've heard that this property might be phased out soon, making it useless for manipulating CSS in Chrome.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on keeping an HTML element from shifting when resizing the browser window (how to lock an element in a specific position on a webpage)

As a newcomer to front-end web development, I recently attempted creating a basic responsive page. While working on this project, I encountered an issue with the candle holder image. This image is size-responsive, meaning it adjusts in size as the browser ...

html css

What is the best way to update a section of an HTML file without changing the entire "inner.html"?

I'm working on a counter that can either count backwards or in ascending order based on requirements. The counter is functioning correctly, but I want to add text to accompany each number as it counts. The issue is that the text changes every time the ...

javascript html css

The left column is stationary vertically, but can be scrolled horizontally

On a webpage, there are three columns: left, middle, and right. Only the left column is set to position:fixed, while the others are normal. When vertically scrolling, the left column should remain fixed while the other two scroll. However, when the brows ...

html css layout css-position

CSS code for vertical navigation arrows to remain on both the left and right sides of the webpage

I'm struggling a bit with the CSS. I want to recreate the same effect as seen on . The left and right navigation arrows stay fixed vertically even when scrolling up or down the page. Does anyone have any code examples for that? ...

javascript jquery html css

Adjusting the size of Bootstrap alerts while ensuring the close icon remains correctly positioned

Below is the HTML code snippet I am working with: <div class="row mt-2"> <div class="col-lg-5"> <div id="alertmessages"></div> </div> <div class="col-lg-7"> <div class="btn-group-sm"> ...

javascript css bootstrap-4

Ensure the width of ancestor flexbox divs is limited to the width of its child by setting a specific width

I have a specific element that incorporates flex display and I've defined its width with the flex-basis property like this: .flex-row input { flex: 0 1 450px; } There is a flex-row division nested inside a flex-container division. My goal is for th ...

html css flexbox

Avoiding additional empty lines between selectors when setting up Stylelint

Can anyone help me with configuring Stylelint options? Specifically, I want to enforce a rule that no empty lines are allowed between selectors in a list of selectors: &:focus, &:hover, &.active { color: #fb3a5e; text-align: left; text-de ...

css frontend stylelint

"Utilizing CSS for aligning text to the left and enabling overflow to

I'm struggling to create breadcrumbs that are aligned to the left but adjust if they become too long. Here's a small example: | Breadcrumb1 > Breadcrumb2 | However, | umb3 > Breadcrumb4 > Breadcrumb5 | I came across direction ...

html css alignment text-alignment

Ensure the webpage is set to have a minimum width of 1024 pixels

Is it possible to make a webpage that utilizes bootstrap, Angular 2x, and Scss stop being responsive once the screen width reaches 1024px? I would like the layout to stay fixed at this size and enable horizontal scrolling for users who resize their browser ...

html css sass

Setting up breakpoints for nested rows in Bootstrap can be achieved by utilizing the responsive

Currently, I am in the process of learning how to create a responsive website. One thing that has me puzzled is how to set the breakpoints for the content when the screen size changes. Here is what I am aiming to achieve: https://i.sstatic.net/DeyD0.png ...

html css bootstrap-4 responsive-design frontend

What is the process for incorporating dynamic templates in AngularJS?

I have created 3 unique templates (DetailView, CardView, Column) for displaying content on a single page. Users can easily switch between these views. My goal is to display only one view at a time on the page. When the user switches views, I want to remov ...

c#html css angularjs

Unusual shadow cast by the box's silhouette

I am currently facing an issue with a box and its shadow. When I close the box, a different shadow lingers behind. I have tried troubleshooting this problem but cannot pinpoint the source. I have included the relevant code files in the specified folders. I ...

javascript html css

Issues with implementing Bootstrap tabs in Vue application

Currently, I am in the process of developing an application using vue, vue-router, and bootstrap. My goal is to integrate tags in bootstrap as shown below: <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-l ...

javascript html css twitter-bootstrap vue.js

What is the method for creating a background similar to that found on the Bootstrap homepage?

body>div { background-color: red; } <div>Additional content here</div> Looking for assistance in achieving a similar background to the one on the bootstrap main page. I attempted using a gradient, but was unable to achieve the desired re ...

css bootstrap-5 gradient

What's causing these flex items to not wrap around properly?

I'm facing an issue with a flex item that also acts as a flex container, .sub-con. The problem is that the flex item within .sub-con is not wrapping even after applying flex-flow: row wrap. Is there anyone who can help me resolve this problem or iden ...

html css flexbox word-wrap

The website appears as I envisioned it when using Raw HTML, but when implementing Django, a strange blank space materializes within the for loop

<div id="Project" class="bg-white fnt-white brdr project-div "> <div class="float-left image-for-project-container brdr"> <img src="{% static './Images/manworking.webp' %}" ...

html css django

CSSer Q&A