Css tricks force element

HOT CSS

Free Beautiful Css templates, Web designer tricks from expert

Tutorial Force Element To Self-Clear its Children

.clearfix:after < visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; >.clearfix < display: inline-block; >/* start commented backslash hack \*/ * html .clearfix < height: 1%; >.clearfix < display: block; >/* close commented backslash hack */

Just apply a to the parent element. This is an improved version of the original, and documented here.

Updated by Jeff Starr to be cleaner, based on the fact that nobody uses IE for Mac, which is what the backslash hack was all about.

.clearfix:after < visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; >* html .clearfix < zoom: 1; >/* IE6 */ *:first-child+html .clearfix < zoom: 1; >/* IE7 */

Updated again. «group» class name is nicer and more semantic (via Dan Cederholm). Content property doesn’t even need the space, can be empty string (via Nicolas Gallagher). Without any text, font-size is un-needed (Chris Coyier).

.group:after < visibility: hidden; display: block; content: ""; clear: both; height: 0; >* html .group < zoom: 1; >/* IE6 */ *:first-child+html .group < zoom: 1; >/* IE7 */

Of course if you drop IE 6 or 7 support, remove the associated lines.

Update May 18, 2011: Nicolas Gallagher again with the «micro» clearfix. Also see this additional stuff.

.group:before, .group:after < content: ""; display: table; >.group:after < clear: both; >.group < zoom: 1; /* For IE 6/7 (trigger hasLayout) */ >

Update August 2012: I’d say for the most part these days (if you only need IE 8 and up) this is fine:

Leave a Reply

Random Tutorials

Categories

Useful links

Popular Posts

adf.ly, lienscash.com, adfoc.us, bc.vc bypasser extension for Chrome

View all animated gifs in a folder at the same time?

Create a phpFox module

Build multi-platform IOS, Window mobile, Andorid app with Intel XDK

50 Beautifull Css3 Buttons

Simple Responsive Drop Down Menu jQuery CSS3

What is the difference between Cloud Server (Cloud VPS) with VPS

15 jQuery Ajax Shopping Carts

How to disable updatedb? /usr/bin/updatedb

function detect Unicode UTF-8 string PHP

Источник

Clearfix hack: A CSS Trick you cannot ignore

We apply various hacks in our everyday life to solve complications and make things easier and comfortable in use. Clearfix is a hack for the developers that solves a CSS layout problem tactfully. Clearfix is neither a CSS property nor an attribute. It is actually an idea, a trick to fix a common CSS problem closely associated with clear and float property.

Contextually, beginners who are anyway uncertain of float and clear property are suggested to check-out these links: Understand CSS Float Property own Way and Figure out CSS clear and float Property.

What Clearfix is

Clearfix technique is used to solve the problem created in float-based layout. When a number of elements (children) float under a container element (parent), children tend to stack with each other horizontally or one overlaps other or overflows outside container. This is a common problem arising during building up any layout including website layout that usually contains header, footer, left-sidebar, middle part, right sidebar etc.

The common way to fix this issue is implementing a CSS class with Parent which automatically clears its children without needing additional coding for the children separately. This tactic is called Clearfix hack in which the CSS class name is typically given .clearfix (though class name can be anything).

However, before we enter the details of which properties and values are included in the .clearfix class and why, let’s explore a bit how much essential and relevant Clearfix is in the present context of language development.

Is Clearfix still relevant?

The clearfix issue is not a new one like you and me. It is since 2004 that clearfix fact put developers and designers into thinking and research which resulted in a number of property:value for .clearfix class. The name which comes first among the clearfix researchers is Holly Begevin.

But note that clearfix is only necessary when you need to build a layout on the basis of CSS float. Over the years since 2004, developers had to rely on Float, Block-inline, Table and so for designing of a layout which noway the perfect alternative to something essential for chalking-out a responsive website.

However it is to fulfill this historic necessity that there came grid and flexbox layout system in CSS. On arrival of grid and flexbox, Clearfix loses its importance to some extent but it is still relevant to the web developers and designers.

The most important reason for this is that Grid and Flexbox layouts are actually involved in the recent updates of CSS. So, they cover up supports of only the recent versions of Browsers. If you need supports of older Browsers, those layout modules are not applicable for you. So, it is obvious that implementation of float layout as well as Clearfix is still relevant in this age.

Properties for .clearfix class

When a child element is taller than its parent, it will overflow outside its container, then we can solve this by using overflow:auto with clearfix class. Follow example 1.

We take a container (parent) div and two elements (children) inside it. One is a Paragraph (p) with text and another an image (img). Observe the CSS coded.

    div < border: 3px solid #4CAF50; padding: 5px; >.img  
Duis finibus, tortor eu viverra tempus, justo ante viverra lacus, sed cursus dui nibh id orci.
  

Duis finibus, tortor eu viverra tempus, justo ante viverra lacus, sed cursus dui nibh id orci. Duis finibus, tortor eu viverra tempus, justo ante viverra lacus, sed cursus dui nibh id orci.

We see left-floated image has overflowed outside its container. Now let’s use Clearfix.

    div < border: 3px solid #4CAF50; padding: 5px; >.img < float: left; width:140px; height:140px; >.clearfix  
Duis finibus, tortor eu viverra tempus, justo ante viverra lacus, sed cursus dui nibh id orci.
  

Duis finibus, tortor eu viverra tempus, justo ante viverra lacus, sed cursus dui nibh id orci. Duis finibus, tortor eu viverra tempus, justo ante viverra lacus, sed cursus dui nibh id orci.

All are cleared and solved.

Other properties with clearfix class

Here are other properties that are used with Clearfix class especially for web layout and to place multiple HTML elements side by side-

However, we’re expecting to clarify all of these in any of our CSS tutorials next time.

Hope you have gained a crystal understanding of what Clearfix in CSS is.

Источник

Force Selection of Text Block

Have you ever seen (or put yourself) some text into a or , not because it was part of a form, but because it made the whole block of text easier to select. Inputs like that have selection <em>boundaries</em>, meaning you can click into them and (for example) <b>Select All</b> and get just the text inside the input. There is a CSS property that allows us to do that without needing to use a not-particularly-semantically-appropriate form input. It’s the user-select property, and it works like this:

Autoprefixer will handle this for you, but if doing by hand, this is what you’ll need for the best browser support:

I find the most common use-case for this kind of thing is “here’s some server-generated copy-and-pasteable embed code for Our Thing™”. Imagine the embed code for YouTube or Vimeo videos: Makes sense on a site like my old HTML-Ipsum, which is in dire need of an update.

How about a slightly different use-case, a cheat sheet, in which there are some simple code snippets that are intended to be copied: See the Pen SVG Shape Cheatsheet (user-select: all; demo) by Chris Coyier (@chriscoyier) on CodePen.

More on the prefixing thing

1. It’s weird to just put -webkit- for Firefox, even though it takes it
2. Edge doesn’t support all , but it supports none with a prefix, so it always prefixes the property

Let’s say you don’t like the forced selection, but like the selection boundaries.

That’s what the contain value is all about. It makes text selection behave like it would within an input:

.select-text-like-you-would-within-a-textarea < /* Not supported anywhere yet */ user-select: contain; >

Alas, no support yet. IE/Edge does support a proprietary version though:

So now we have none , all , and contain . There is also text , which makes the text selectable like “normal” text.

If you ever need to reset the value, you should use auto , as it’s the value that returns the element back to it’s normal state (e.g. a

would return to text, a would return to contain).

Since we’re talking about selecting text here, remember you can style selected text:

Although… I might recommend not pairing these, as the auto-selecting text behavior is already a little weird, so that combined with a totally different selection style might be confusing to the point of a person not understanding what is happening.

Or at least, making the ::selection site-wide, not specific to isolated areas.

The Classic JavaScript Way

No Edge support might be a deal-breaker for you. If it’s mission-critical to auto-select text, you might wanna just stick with an input and JavaScript.

I’m sure you could get a lot fancier, like by avoiding inline event handling, and considering the “OK, I’ve clicked into you and you selected your text, I get it, now stop doing that so I can only select a part of you” – which is certainly possible.

For better or worse, user-select: text; might be a way to make pseudo elements (like ::before or ::after ) selectable, which they currently are not in any browser. It’s probably good that you can’t select them, as pseudo elements also aren’t supposed to be read in AT (because they aren’t “content”). But it is kinda strange to see text on a screen you can’t select, so I wouldn’t be surprised whichever way browsers land on this.

For iOS, there is yet-another thing you may want to use:

Not specifically about selection, but if you’re preventing selection of text you’re likely preventing interaction in general. MDN:

When a target is touched and held on iPhone OS, Safari displays a callout information about the link. This property allows disabling that behavior.

Since we’re talking about forcing selection of text, can we force a copy-to-clipboard as well? You can, actually. There used to be a Flash-based way to do it, but, as I think we all know, Flash is pretty dead. Chrome just announced another deathblow. IE 10 supported this execCommand thing, and as it happens, that seems like the thing that browsers are going with. Snagged this demo from that Google article by Matt Gaunt:

Looks like that works in Blink-land, Firefox, and Edge, so… cool.

• user-select on MDN – a bit more detail on here on the prefixes and properetary values.
• Can I Use on support – specifically of the none value
• Current version of spec – the best I can tell
• Document from Google with some interesting specifics on support and links to relevent bugs.

That was a lot of words for such a simple thing. Good work team.

Источник