Видљивост - ЦСС-трикови

Anonim

visibilityИмовина у ЦСС-у има две различите функције. Сакрива редове и колоне табеле, а такође скрива елемент без промене распореда.

p ( visibility: hidden; ) tr ( visibility: collapse; )

visibilityима четири валидне вредности: visible, hidden, collapse, и inherit. Проћи ћемо кроз сваку од њих да бисмо сазнали више.

видљиво

Баш као што звучи, visibleчини ствари видљивим. Подразумевано се ништа не крије, тако да ова вредност не чини ништа ако нисте поставили hiddenовај или родитељ овог елемента.

сакривен

hidden Вредност крије ствари. Ово се разликује од употребе display: none, јер hidden само визуелно сакрива елементе. Елемент је још увек ту и још увек заузима простор на страници, али више га не можете видети (некако попут окретања непрозирности на 0). Занимљиво је да ово својство не наслеђује по дефаулту. То значи да, за разлику од display или opacity својстава, можете да направите елемент hiddenи још увек имате једно од његових подређених, на пример visible, овако:

Приметите да, иако је скривени, надређени елемент не покреће :hover.

колапс

Овај само утиче на редове табеле ( ), групе редова (попут ), колоне ( ), групе колона ( ) или елементе направљене да буду на тај начин путем display).

За разлику од hiddenове вредности, ова вредност скрива поделемент табеле, не остављајући простор тамо где је била. Ако се користи било где, осим на поделементу табеле, делује као visibility: hidden.

Има толико чудних ствари с тим да је тешко знати одакле почети. Баш као предјело:

  • Цхроме / Сафари ће срушити ред, али простор који је заузео остаће. А ако су ћелије табеле унутар имале обруб, то ће се срушити у једну обруб дуж горње ивице.
  • Цхроме / Сафари неће сажети колону или групу колона.
  • Сафари сажме ћелију табеле (погрешно), али Цхроме неће (тачно).
  • У било ком прегледачу, ако се ћелија налази у колони која је скупљена (без обзира да ли се стварно скупља), текст у тој ћелији неће бити приказан.
  • Опера (пре ВебКит) ће уништити срање од свега, осим од ћелије табеле (што је тачно).

Има још, али у основи: немојте ово никада користити.

наследити

Подразумевана вредност. Ово једноставно доводи до тога да елемент наследи вредност свог родитеља.

Флекбок

visibility: collapse; се користи и у Флекбок-у, и прецизније је дефинисан.

Подршка прегледача

Основе, не узимајући у обзир све хировитости са колапсом:

Било који Било који Било који 4+ 4+ Било који Било који

ИЕ 7- не подржава collapseили inherit.