Switch branches/tags
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
README.md

README.md

light bulb icon

CSS પ્રોપ્સ Awesome

તમારા CSS કુશળતાને ધ્યાનમાં રાખવામાં સહાય માટે ટિપ્સનો સંગ્રહ.

અન્ય મહાન યાદીઓ માટે તપાસો @sindresorhus's ની યાદી અદ્ભુત યાદીઓ.

વિષયસુચીકોષ્ટક

અરજી / અનપ્પેલી કરવા માટે

પ્રોપ્સ

  1. એક સીએસએસ રીસેટ વાપરો
  2. વારસો box-sizing
  3. બધા ગુણધર્મોને ફરીથી સેટ કરવાને બદલે 'અનસેટ' નો ઉપયોગ કરો
  4. વાપરવ :not() અરજી / અનપ્પેલી કરવા માટે નેવિગેશન પર બોર્ડર્સ
  5. ઉમેરો line-height તરફ body
  6. વર્ટિકલ-કેન્દ્ર કંઈપણ
  7. કોમા-વિભાજિત સૂચિ
  8. નકારાત્મક મદદથી વસ્તુઓ પસંદ કરો nth-child
  9. ચિહ્નો માટે SVG નો ઉપયોગ કરો
  10. આ વાપરો "Lobotomized Owl" પસંદગીકાર
  11. વાપરવ max-height શુદ્ધ માટે CSS સ્લાઇડર્સનો
  12. સમાન-પહોળાઈ કોષ્ટક કોષ
  13. છુટકારો મેળવવા માર્જિન હેક્સ સાથે Flexbox
  14. વાપરવ એટ્રીબ્યુટ પસંદગીકારો સાથે ખાલી કડીઓ
  15. પ્રકાર "Default" કડીઓ
  16. સુસંગત વર્ટિકલ રિધમ
  17. આંતરિક ગુણોત્તર બૉક્સીસ
  18. પ્રકાર તૂટેલી છબીઓ
  19. વાપરવ rem માટે વૈશ્વિક કદ બદલવાનું; વાપરવ em માટે સ્થાનિક કદ બદલવાનું
  20. છુપાવો ઑટોપ્લે વિડિઓઝ તે નથ ચૂપ
  21. વાપરવ :root માટે Flexible Type
  22. સેટ font-size on ફોર્મ તત્વો માટે a બેટર મોબાઇલ અનુભવ
  23. માઉસ ઇવેન્ટ્સ નિયંત્રણ કરવા માટે પોઇન્ટર ઇવેન્ટ્સનો ઉપયોગ કરો

વાપરવ a CSS રીસેટ

સીએસએસ રીસેટ્સ સ્ટાઇલ ઘટકો માટે સ્વચ્છ સ્લેટ સાથે વિવિધ બ્રાઉઝર્સમાં સ્ટાઇલ સુસંગતતાને અમલમાં મૂકવા માટે મદદ કરે છે. તમે જેમ કે CSS રીસેટ લાઇબ્રેરીનો ઉપયોગ કરી શકો છો Normalize, et al., અથવા તમે વધુ સરળ રીસેટ અભિગમનો ઉપયોગ કરી શકો છો:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

હવે તત્વો માર્જિન અને પેડિંગની છીનવી લેવામાં આવશે, અને box-sizing તમે સીએસએસ બોક્સ મોડેલ સાથે લેઆઉટ મેનેજ કરી શકો છો.

Demo

નોટ: જો તમે અનુસરશો તો Inherit box-sizing નીચે ટીપ તમે નીચેની શામેલ ન કરવાનું પસંદ કરી શકો છો box-sizing મિલકત માં તમારા CSS રીસેટ .

સામગ્રીઓના કોષ્ટકમાં પાછા

વારસો box-sizing

પરવાનગી આપો box-sizing માંથી વારસામાં આવશે html:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

આનાથી ફેરફાર કરવાનું સરળ બને છે box-sizing પ્લગઇન્સ અથવા અન્ય ઘટકોમાં લીવરેજ કે અન્ય વર્તન.

સામગ્રીઓના કોષ્ટકમાં પાછા

બધા ગુણધર્મોને ફરીથી સેટ કરવાને બદલે 'અનસેટ' નો ઉપયોગ કરો

તત્વના ગુણધર્મોને ફરીથી સેટ કરતી વખતે, પ્રત્યેક વ્યક્તિગત સંપત્તિને ફરીથી સેટ કરવું જરૂરી નથી:

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}

તમે 'બધા' લઘુલિપિનો ઉપયોગ કરીને એક તત્વની તમામ ગુણધર્મોને સ્પષ્ટ કરી શકો છો. અનસેટ માટે મૂલ્યને સેટ કરવાથી એક ઘટકના ગુણધર્મોને તેમની પ્રારંભિક મૂલ્યોમાં બદલાય છે:

button {
  all: unset;
}

નોંધઃ બધા લહેરાતોને IE11 માં સપોર્ટેડ નથી અને હાલમાં એજમાં સપોર્ટ માટે વિચારણા હેઠળ છે. IE11 માં અનસેટ સપોર્ટેડ નથી

સામગ્રીઓના કોષ્ટકમાં પાછા

વાપરવ :not() અરજી / અનપ્પેલી કરવા માટે નેવિગેશન પર બોર્ડર્સ

તેના બદલે નો મૂકવા સરહદ પર...

/* add border */
.nav li {
  border-right: 1px solid #666;
}

...અને પછી તે છેલ્લા તત્વ બોલ લેવા...

/* remove border */
.nav li:last-child {
  border-right: none;
}

...વાપરવ :not() pseudo-class ફક્ત તમે ઇચ્છો તે તત્વો પર જ લાગુ કરો:

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

ખાતરી કરો, તમે ઉપયોગ કરી શકો .nav li + li, પરંતુ સાથે :not() ઉદ્દેશ ખૂબ જ સ્પષ્ટ છે અને CSS પસંદગીકાર સરહદને તે રીતે વ્યાખ્યાયિત કરે છે.

Demo

સામગ્રીઓના કોષ્ટકમાં પાછા

ઉમેર line-height તરફ body

તમારે ઉમેરવાની જરૂર નથી line-height to દરેક <p>, <h*>, et al. અલગ. તેની જગ્યાએ, તેને ઉમેરવા body:

body {
  line-height: 1.5;
}

આ માર્ગ textual તત્વો શકવું બોલાવે થી body સરળતાથી.

Demo

સામગ્રીઓના કોષ્ટકમાં પાછા

ઊભું કેન્દ્ર કંઈપણ

ના, તે કાળા જાદુ નથી, તમે ખરેખર ઊભી તત્વોને કેન્દ્રિત કરી શકો છો:

html,
body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

કેન્દ્ર માંગો છો કંઈક બીજું? વર્ટિકલ, આડા...કંઈપણ, કોઈપણ સમયે, ગમે ત્યાં? CSS-Tricks has a nice write-up on કરવાનું બધા કે.

નોટ: જુઓ કેટલાક માટે buggy behavior સાથે flexbox માં IE11.

Demo

સામગ્રીઓના કોષ્ટકમાં પાછા

કોમા-વિભાજિત સૂચિ

સૂચિ આઇટમ્સ વાસ્તવિક, અલ્પવિરામથી વિભાજીત સૂચિની જેમ દેખાય છે તે બનાવો:

ul > li:not(:last-child)::after {
  content: ",";
}

વાપરવ આ :not() pseudo-class તેથી છેલ્લી વસ્તુમાં કોઈ અલ્પવિરામ ઉમેરવામાં આવી નથી.

નોટ: આ ટિપ સુલભતા માટે આદર્શ નથી, ખાસ કરીને સ્ક્રીન વાચકો. અને બ્રાઉઝરમાંથી કૉપિ / પેસ્ટ CSS- જનરેટેડ સામગ્રી સાથે કામ કરતું નથી. સાવધાની સાથે આગળ વધો.

સામગ્રીઓના કોષ્ટકમાં પાછા

નકારાત્મક મદદથી વસ્તુઓ પસંદ કરો nth-child

વાપરવ નકારાત્મક nth-child વસ્તુઓ પસંદ કરવા માટે CSS માં 1 દ્વારા n.

li {
  display: none;
}

/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
  display: block;
}

અથવા, કારણ કે તમે પહેલેથી જ વિશે થોડું શીખ્યા છે using :not(), પ્રયત્ન કરો:

/* select all items except the first 3 and display them */
li:not(:nth-child(-n+3)) {
  display: none;
}

વેલ તે ખૂબ સરળ હતું.

Demo

સામગ્રીઓના કોષ્ટકમાં પાછા

વાપરવુ માટે SVG નો ઉપયોગ કરો

ચિહ્નો માટે એસવીજીનો ઉપયોગ ન કરવા માટે કોઈ કારણ નથી

.logo {
  background: url("logo.svg");
}

The SVG scale is good for all resolution types and it is supported in all browsers back to IE9. તેથી છુટકારો મેળવવા .png, .jpg, or .gif-jif-whatev ફાઈલો.

નોટ: જો તમારી પાસે SVG આઇકોન-માત્ર બટનો છે અને જોવામાં આવેલાં વપરાશકર્તાઓ માટે SVG લોડ કરવામાં નિષ્ફળ જાય, તો તે એક્સેસીબિલીટી જાળવી રાખવામાં મદદ કરશે.:

.no-svg .icon-only::after {
  content: attr(aria-label);
}

સામગ્રીઓના કોષ્ટકમાં પાછ

આ વાપરો "Lobotomized Owl" પસંદગીકાર

તેમાં વિચિત્ર નામ હોઈ શકે છે પરંતુ સાર્વત્રિક પસંદગીકારનો ઉપયોગ કરી શકો છો (*) અડીન બહેન સિલેક્ટર સાથે (+) શક્તિશાળી CSS ક્ષમતા પ્રદાન કરી શકે છે:

* + * {
  margin-top: 1.5em;
}

આ ઉદાહરણમાં, અન્ય ઘટકોને અનુસરતા દસ્તાવેજના પ્રવાહમાંના બધા તત્વો પ્રાપ્ત થશે margin-top: 1.5em.

વધુ માટે "lobotomized owl" પસંદગીકાર, વાંચવું Heydon Pickering's post on A List Apart.

Demo

સામગ્રીઓના કોષ્ટકમાં પાછા

વાપરવ max-height શુદ્ધ માટે CSS સ્લાઇડર્સન

ફક્ત ઉપયોગ કરીને CSS- ફક્ત સ્લાઇડર્સનો અમલ કરો max-height ઓવરફ્લો છુપાયેલ સાથે:

.slider {
  max-height: 200px;
  overflow-y: hidden;
  width: 300px;
}

.slider:hover {
  max-height: 600px;
  overflow-y: scroll;
}

આ તત્વ વિસ્તરે છે max-height Value on hover and slider display as a result of overflow.

સામગ્રીઓના કોષ્ટકમાં પાછા

સમાન-પહોળાઈ કોષ્ટક કોષ

કોષ્ટકો સાથે કામ કરવા માટે પીડા હોઈ શકે છે જેથી આનો ઉપયોગ કરીને પ્રયાસ કરો table-layout: fixed કોષો સમાન પહોળાઈ પર રાખો:

.calendar {
  table-layout: fixed;
}

પેઇન-મુક્ત કોષ્ટક લેઆઉટ.

Demo

સામગ્રીઓના કોષ્ટકમાં પાછા

છુટકારો મેળવવા માર્જિન હેક્સ સાથે Flexbox

સ્તંભ ગટર સાથે કામ કરતી વખતે તમે છુટકારો મેળવી શકો છો nth-, first-, અને last-child હેક્સ દ્વારા ઉપયોગ કરીને flexbox's space-between મિલકત:

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}

હવે સ્તંભ ગટર હંમેશા સરખે ભાગે-અંતરે દેખાય છે.

સામગ્રીઓના કોષ્ટકમાં પાછા

વાપરવ એટ્રીબ્યુટ પસંદગીકારો સાથે ખાલી કડીઓ

લિંક્સ દર્શાવો જ્યારે <a> તત્વ કોઈ લખાણ કિંમત નથી પરંતુ href લક્ષણ એક લિંક છે:

a[href^="http"]:empty::before {
  content: attr(href);
}

તે ખૂબ અનુકૂળ છે

Demo

સામગ્રીઓના કોષ્ટકમાં પાછા

પ્રકાર "Default" કડીઓ

માટે એક શૈલી ઉમેરો "default" લિંક્સ:

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

હવે લિંક્સ કે જે CMS દ્વારા દાખલ કરવામાં આવે છે, જે સામાન્ય રીતે એક નથી class એટ્રિબ્યુટ, સામાન્ય રીતે કાસ્કેડને અસર કરતા વગર ભેદ રાખશે.

સામગ્રીઓના કોષ્ટકમાં પાછા

સુસંગત વર્ટિકલ રિધમ

સાર્વત્રિક પસંદગીકારનો ઉપયોગ કરો (*) એક તત્વ અંદર સતત ઊભા લય બનાવવા માટે:

.intro > * {
  margin-bottom: 1.25rem;
}

સતત વ્રેટકલ લય દૃશ્ય એકંદર પૂરી પાડે છે જે સામગ્રીને વધુ વાંચવા માટે બનાવે છે.

સામગ્રીઓના કોષ્ટકમાં પાછા

આંતરિક ગુણોત્તર બૉક્સીસ

સ્વભાવિક રેશિયો સાથે બૉક્સ બનાવવા માટે, તમારે ફક્ત ટોચ અથવા તળિયે ગાદીને DIV પર લાગુ કરવાની જરૂર છે:

.container {
  height: 0;
  padding-bottom: 20%;
  position: relative;
}

.container div {
  border: 2px dashed #ddd;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

પેડિંગ માટે 20% નો ઉપયોગ કરીને તેના પહોળાઈના 20% જેટલા બૉક્સની ઊંચાઇને બનાવે છે. કોઈ વ્યૂપોર્ટની પહોળાઇ, બાળક ડિવ તેના પાસા રેશિયો રાખશે (100% / 20% = 5:1).

Demo

સામગ્રીઓના કોષ્ટકમાં પાછા

પ્રકાર તૂટેલી છબીઓ

તૂટેલી તસવીરો CSS ના થોડુંક સાથે વધુ સૌંદર્યલક્ષી-આનંદી બનાવો:

img {
  display: block;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 300;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  width: 100%;
}

હવે ઉમેરો pseudo-elements તૂટેલી છબીના વપરાશકર્તા સંદેશ અને URL સંદર્ભને પ્રદર્શિત કરવાના નિયમો:

img::before {
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img::after {
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

આ પેટર્ન માટે સ્ટાઇલ વિશે વધુ જાણો Ire Aderinokun's original post.

સામગ્રીઓના કોષ્ટકમાં પાછા

વાપરવ rem માટે વૈશ્વિક કદ બદલવાનું; વાપરવ em માટે સ્થાનિક કદ બદલવાનું

રુટ પર મૂળ ફોન્ટ માપ સુયોજિત કર્યા પછી (html { font-size: 100%; }), શાબ્દિક તત્વો માટે ફૉન્ટનું કદ સેટ કરો em:

h2 {
  font-size: 2em;
}

p {
  font-size: 1em;
}

પછી મોડ્યુલો માટે ફૉન્ટ-કદ સેટ કરો to rem:

article {
  font-size: 1.25rem;
}

aside .module {
  font-size: .9rem;
}

હવે દરેક મોડ્યુલ શ્રેણીબદ્ધ અને સરળ, વધુ નિભાવવા યોગ્ય અને લવચીક બની જાય છે.

સામગ્રીઓના કોષ્ટકમાં પાછા

છુપાવો ઑટોપ્લે વિડિઓઝ તે નથ ચૂપ

આ વૈવિધ્યપૂર્ણ વપરાશકર્તા સ્ટાઇલશીટ માટે એક મહાન યુક્તિ છે. એક વપરાશકર્તા દ્વારા અવાજ સાથે ઓવરલોડિંગ કરવાનું ટાળો, જે જ્યારે પૃષ્ઠ લોડ થાય ત્યારે ઑટોપ્લે કરે છે. જો અવાજ મૌન નથી, તો વિડિઓ બતાવશો નહીં:

video[autoplay]:not([muted]) {
  display: none;
}

ફરી એક વાર, અમે આનો ઉપયોગ કરીને લાભ લઈ રહ્યાં છીએ :not() pseudo-class.

સામગ્રીઓના કોષ્ટકમાં પાછા

વાપરવ :root માટે Flexible Type

એક પ્રતિસાદિત લેઆઉટમાં ટાઇપ ફૉન્ટનું કદ દરેક વ્યૂપોર્ટ સાથે વ્યવસ્થિત થવું જોઈએ. તમે ઉપયોગ કરીને વ્યૂપોર્ટની ઊંચાઈ અને પહોળાઈના આધારે ફોન્ટ કદની ગણતરી કરી શકો છો :root:

:root {
  font-size: calc(1vw + 1vh + .5vmin);
}

હવે તમે આ ઉપયોગ શ root em દ્વારા ગણવામાં આવેલ કિંમત પર આધારિત એકમ :root:

body {
  font: 1rem/1.6 sans-serif;
}

Demo

સામગ્રીઓના કોષ્ટકમાં પાછા

સેટ font-size on ફોર્મ તત્વો માટે a બેટર મોબાઇલ અનુભવ

મોબાઇલ બ્રાઉઝર્સને ટાળવા માટે (iOS Safari, et al.) થી ઝુમિંગ HTML ફોર્મ એલિમેન્ટ્સ પર જ્યારે એક <select> ડ્રોપ ડાઉન ટેપ થયેલ છે, ઉમેરો font-size to the selector rule:

input[type="text"],
input[type="number"],
select,
textarea {
  font-size: 16px;
}

💃

સામગ્રીઓના કોષ્ટકમાં પાછા

માઉસ ઇવેન્ટ્સ નિયંત્રણ કરવા માટે પોઇન્ટર ઇવેન્ટ્સનો ઉપયોગ કરો

પોઇન્ટર ઇવેન્ટ્સ તમને સ્પષ્ટ કરવા માટે પરવાનગી આપે છે કે માઉસ કેવી રીતે તૃપ્તિ સાથે સંપર્ક કરે છે. બટનો પર ડિફૉલ્ટ પોઇન્ટર ઇવેન્ટને અક્ષમ કરવા માટે, ઉદાહરણ તરીકે:

.button-disabled {
  opacity: .5;
  pointer-events: none;
}

તે સરળ છે.

સામગ્રીઓના કોષ્ટકમાં પાછા

આધાર

વર્તમાન આવૃત્તિઓ of Chrome, Firefox, Safari, Opera, Edge, અને IE11.

સામગ્રીઓના કોષ્ટકમાં પાછા